CSS定位 - 技术栈

概念

规定元素的位置
主要用于没有规律的元素布局
相对定位、绝对定位、固定定位

使用：

规定是哪一种定位
指在一个方向上的偏移量top、bottom、left、right
top和bottom同时设置则只有top生效
left和right同时设置则只有left生效

相对定位

position：relative

指定之后，元素就是一个定位元素，脱离文档流
相对定位脱离文档流，当时原来的位置还得保留，并未完全脱离文档流
left和top方向的设置优先
（相对原来的位置进行偏移）

绝对定位

脱离文档流
原来位置不会保留
相对最近的、有定位属性、的父元素进行定位
如果找不到这类元素，才会依据body进行定位

定位偏移量

可以使用合法的尺寸单位
可以使用负值，元素的偏移方向与正值相反
元素相对于哪个元素进行定位，使用百分比时，就是哪个元素的宽/高的百分比（可以使用负的百分比）

css 复制代码

        .adpa{
            position: relative;
           width: 700px;
           height: 500px;
        }

        .ab1{
            position: absolute;
            top: 100px;
        }

css 复制代码

 <div class="abpa" style="border: 1px red solid;">
        <div class="ab1"><img src="../duck.jpg" alt=""></div>
 </div>

层级

每一定位元素会独占一层，不允许有其他元素
例z-index: 2; 改变元素浮动的层级来改变元素的堆叠的顺序
数字越大，元素的层级越高，即最在外面一层
默认值为0
当层级一样时，后写的元素会盖住前面写的元素

css 复制代码

<body>
    <img class="a" src="../SeanXiao.png" alt="">
    <img class="b" src="../duck.jpg" alt="">
    <img class="c" src="../flower.jpg" alt="">`
</body>

css 复制代码

        .a{
            position: absolute;
            top: 50px;
            left: 50px;

        }
        .b{
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 1;
        }  
        .c{
            position: absolute;
            top: 150px;
            left: 150px;
        }

固定定位

 position: fixed、top、bottom;

文档完全脱离文档流

是相较于浏览器的窗口进行定位

css 复制代码

<body>
<img class="a" src="../SeanXiao.png" alt="">
    <img class="b" src="../duck.jpg" alt="">
    <img class="c" src="../flower.jpg" alt="">
    <img class="d" src="../image.png" alt="">
</body>

css 复制代码

        .a{
            width: 100%;
            height: auto;
        }
        .d{
            position: fixed;
            top: 50px;
            left: 5px;
            height: auto;
        }