2020-1-22 css定位笔记

一、css 定位基础笔记

1.position： (posit 放，放置 + ion 表名词 → 放出的〔立场〕=位置)
static(默认) (stat 站，立 + ic …的 → 立着不动的 → 静止的)
relative (adj.相对于 n.亲戚)
absolute (绝对的)
fixed (fix 使固定)
sticky (粘性的)
z-index (量度)

2.relative：
如果未设置定位偏移量，对本身无影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom 是相对于‘自身’偏移

3.absolute:
使元素完全脱离文档流
使内联元素支持宽高（让内联具备快的性质）
使快元素的宽高由内容决定（让快决定内联的性质）
如果祖先元素有定位，则相对祖先元素位移，无的话相对文本位移

4.fixed:
使元素完全脱离文档流
使内联元素支持宽高（让内联具备快的性质）
使快元素的宽高由内容决定（让快决定内联的性质）
相对整个浏览窗口进行偏移

5.sticky黏性定位
在指定位置，进行黏性定位
（暂时认为：只对一级标签管用）

6.z-index定位层级
a.存在position时，z-index才生效
b.优先考虑同级或者父级的z-index

学习时测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* body{height: 1000px;}

        .box1{ border: 5px red solid; margin-top: 500px; }

        .box2{ width: 100px; height: 100px; background: springgreen; position: absolute; top: 300px; left: 130px;}
        .box3{ width: 100px; height: 100px; background: yellow; position: absolute;} */

        /* body{height: 3000px; background: darkmagenta;}

        .box1{ border: 5px red solid; margin-top: 300px; }

        .box2{ width: 100px; height: 100px; background: springgreen; position: fixed; top: 300px; left:200px ; }
        .box3{ width: 100px; height: 100px; background: yellow;} */

        /* body{height: 3000px; background: darkmagenta;}
        .box1{ border: 5px red solid; margin-top: 300px;  position: sticky; top: 100px;}
        .box2{ width: 100px; height: 100px; background: springgreen; }
        .box3{ width: 100px; height: 100px; background: yellow;} */


        body{height: 3000px; background: darkmagenta; }
        .box1{ border: 5px red solid; margin-top: 100px;position: relative; z-index: 2;}
        .box2{ background: rgb(2, 250, 2); width: 100px; height: 100px; position: relative; z-index: 3000;}
        .box3{ background: mediumblue; width: 200px; height: 200px; margin-top: -50px; position: relative; z-index: 3;}
        .box4{ border: 5px rgb(238, 255, 0) solid;}







    </style>
</head>
<body>
    <!-- <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div> -->
    
    <div class="box1">
        <div class="box2"></div>
        
    </div>

    
    <div class="box4">

        <div class="box3"></div>
    </div>

</body>
</html>

二、定位实现下拉列表框
1.写好样式并定好位后，用 display:none 隐藏
2.利用伪元素 :hover{dispaly:block} 显示

2020-1-22 css定位笔记

猜你喜欢