CSS 定位样式

CSS position 属性用于指定一个元素在文档中的定位方式，其中 top, right, bottom 和 left 属性则决定了该元素的最终定位

• position: sticky | fixed | static | relative | absolute

相对定位及特性

• 相对定位的元素是在文档中的正常位置偏移给定的值
• 不影响其他元素布局
• 相对于自身进行偏移

源码预览打开窗口

查看源码

绝对定位及特性

• 绝对定位的元素脱离了文档流，绝对定位元素不占据空间
• 具备内联盒子特性：宽度由内容决定
• 具备块级盒子特性：支持所有样式
• 绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于可视区定位

源码预览打开窗口

查看源码

固定定位及特性

• 固定定位与绝对定位相似，但是会固定在可视区中
• 具备内联盒子特性：宽度由内容决定
• 具备块级盒子特性：支持所有样式
• 固定定位元素不受祖先元素影响

源码预览打开窗口

查看源码

粘性定位及特性

• 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位

源码预览打开窗口

查看源码

z-index 属性

定位元素 z-index 先跟同级父容器比较，如果父容器没有设置 z-index，才跟子元素比较

源码预览打开窗口

查看源码