html css中position定位系统详解

熊大2022年5月26日大约 2 分钟约 597 字

静态定位 static

特点：
- 属于默认的配置。
- 使元素定位常规流中(块级垂直排列，行内水平从左到右排列)。
- 忽略top,bottom,left,right,z-index属性。
- 垂直方向外边距重叠：最终外边距=两个相邻元素外边距中最大的。
- 具有固定长宽的值的元素，如果左右外边距设置auto后会自动扩大占满剩余宽度，效果就是块水平居中

相对与自己定位 relative

特点
- 参照物是自己。
- 使元素成为containing-block（可定位的祖先元素，它的绝对定位后代都可以相对于它进行绝对定位）。
- 可以使用top,right,bottom,left,z-index进行定位(相对于自己)。
- 不会离开常规流。
- 任何元素都可以设置为relative。
- 可以把浮动元素设置相对定位，使他们发生偏移，并控制它们的堆叠顺序。

绝对与已定位的父元素 absolute

注意：

绝对与最近的已定位的父元素（除static定位外的定位）

特点
- 脱离常规流。
- 可以使用top,right,bottom,left,z-index。设置的百分比比的是最近已定位父元素。
- lrtb如果为0，将对其到最近定位父元素的各边（居中妙计）。
- lrtb如果为auto，它将被打回原形。
- 如果找不到已定位父元素，会认<body>为爹。
- z-index可以控制重叠顺序，数字越大越优先。

绝对定位的元素居中

<style>
    .parent {
        position: relative;
        width: 200px;
        height: 150px;
        background: blue;
    }
    .child {
        position: absolute;
        width: 80px;
        height: 80px;
        background: red;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto auto;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

将绝对定位元素设置lrtb:0,margin:auto

固定(窗口)定位 fixed

特点
- 与绝对定位一样，继承绝对定位特点，只有一个区别
- 区别是偏移的参照物不一样，固定定位的参照物是屏幕窗口。
- 固定定位元素不会随视口滚动而滚动

粘性定位 sticky

特点
- relative + fixed的完美结合，制造出吸附效果
- 如果产生了偏移，原位置还是会在常规流中
- 参照物是最近的滚动的祖先元素，默认是滚动的窗口