css相对定位与绝对定位

绝对定位：

position:absolute;表示绝对定位

left:500px;/top../right.. /bottom..设置了绝对定位以后可以使用这种定位

<style>
    div{
        /*当left/top/right/bottom为0px时，用绝对可以把div填充到整个html*/
        width:200px;
        heiht:200px;
        position:absolute;
        left:0px;
        top:0px;
        right:0px;
        bottom:0px;
        /* calc(50% - 100px) 当你想把div放在页面垂直居中的时候，用绝对定位，top平移50%，left平移50%，然后减去宽高一半*/
    }
​
</style>
​
​
<div>
    
</div>

1. 绝对定位默认会参考窗口边界进行定位，如果有定位的祖先元素，则子元素会参考定位的祖先元素

2. 绝对定位不允许元素margin：0px auto;

3. 绝对定位不需要使用浮动；

4. 绝对定位可以把元素变成行内块；

5. 绝对定位会让元素脱离文档流，类似于浮动后的样子。

6. 绝对定位一般会与相对定位结合使用，子元素设置绝对定位，父元素设置相对定位。

7. 绝对定位重叠时，下面的标签元素会覆盖上面的标签元素

position:relative;表示相对定位

1. 相对定位元素不会离开文档流；

2. 相对定位元素会以当前的位置为参考进行偏移；

3. 相对定位元素偏移后，会保留偏移前的位置；

4. 相对定位不会把元素变成行内块元素；

5. 相对元素可以使用浮动

position:fixed;固定定位

1. 固定定位的元素，不会随着页面的滚动而滚动

2. 固定定位与其他定位大概一致

Z-index属性

1. 绝对定位重叠时，下面的标签元素会覆盖上面的标签元素

2. 可以通过z-index设置定位元素的层级，层级高放在上面；

3. z-index可以写负数

z-index:1;