Position 定位

1.1 固定定位

给一个元素设置position:fixed能够将元素放在视口的任意位置.这需要搭配四种属性一起使用:top,right,bottom和left.这些属性的值决定了固定定位的元素与浏览器视口边缘的距离.

示例:用固定定位创建一个模态框

1.2 绝对定位

绝对定位不是相对视口,而是相对最近的祖先定位元素.跟固定元素一样,属性top,right,bottom和left决定了元素的边缘在包含块里的位置.

示例:用绝对定位创建一个模态框关闭按钮

1.3 相对定位

相对定位的元素以及它周围的所有元素,都保持着原来的位置.如果加上 top、right、bottom 和 left 属性,元素就会从原来的位置移走,但是不会改变他周围元素的位置

示例:用相对定位创建一个下拉框

1.4 粘性定位

粘性定位是相对定位和固定定位的结合体：正常情况下，元素会随着页面滚动，当到达屏幕的特定位置时，如果用户继续滚动，他就会“锁定”在这个位置。最常见的就是侧边栏导航

示例:用粘性定位创建一个侧边导航

1.5 层叠顺序

所有层叠上下文内的元素会按照以下顺序，从后到前叠放：

1. 层叠上下文的根
2. z-index为负的定位元素（及其子元素）
3. 非定位元素
4. z-index为auto的定位元素（及其子元素）
5. z-index为正的定位元素（及其子元素）

示例:层叠顺序常见问题demo

总结

1. 模态框使用固定定位。
2. 下拉菜单、工具提示及其他动态交互使用绝对定位。
3. 实现这些功能时还需要考虑可访问性。
4. 关于z-index有两个地方要注意：它只对定位元素有效；他会创建一个层叠上下文。
5. 在一个页面创建多个层叠上下文时一定要当心潜在的陷阱。
6. 使用粘性定位时注意浏览器的兼容。

最后修改于 2023-03-14