CSS 定位样式
CSS position 属性用于指定一个元素在文档中的定位方式,其中 top, right, bottom 和 left 属性则决定了该元素的最终定位
- position: sticky | fixed | static | relative | absolute
相对定位及特性
- 相对定位的元素是在文档中的正常位置偏移给定的值
- 不影响其他元素布局
- 相对于自身进行偏移
绝对定位及特性
- 绝对定位的元素脱离了文档流,绝对定位元素不占据空间
- 具备内联盒子特性:宽度由内容决定
- 具备块级盒子特性:支持所有样式
- 绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时,则相对于可视区定位
固定定位及特性
- 固定定位与绝对定位相似,但是会固定在可视区中
- 具备内联盒子特性:宽度由内容决定
- 具备块级盒子特性:支持所有样式
- 固定定位元素不受祖先元素影响
粘性定位及特性
- 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位
z-index 属性
定位元素 z-index 先跟同级父容器比较,如果父容器没有设置 z-index,才跟子元素比较