CSS position 的值有哪些？各有什么特点？
五种定位
| 值 | 脱离文档流 | 定位参照 | 适用场景 |
|---|---|---|---|
static |
❌ | 默认流 | 默认值 |
relative |
❌ | 自身原始位置 | 微调位置 |
absolute |
✅ | 最近的非 static 祖先 | 脱离文档流定位 |
fixed |
✅ | 视口 | 固定导航/弹窗 |
sticky |
❌ | 滚动容器 | 粘性导航 |
详细说明
1. static（默认）
- 按照正常文档流排列
top/right/bottom/left/z-index无效
2. relative（相对定位）
- 相对自身原始位置偏移
- 不脱离文档流，原位置保留
- 常作为 absolute 的定位参照
3. absolute（绝对定位）
- 脱离文档流，原位置不保留
- 相对最近的非 static 祖先元素定位
- 如果没有非 static 祖先，则相对
<html>
4. fixed（固定定位）
- 脱离文档流
- 相对浏览器视口定位
- 滚动时位置不变
5. sticky（粘性定位）（CSS3）
- 在可见区域内表现为
relative - 滚动到阈值后表现为
fixed - 不会脱离文档流
/* 粘性导航：滚动到顶部时吸顶 */
.nav {
position: sticky;
top: 0;
z-index: 100;
}z-index 注意事项
- 只在
position非 static 时有效 - 同一层叠上下文内比较 z-index
- 创建层叠上下文的条件：position 非 static + z-index 非 auto、opacity < 1、transform 非 none 等
sticky 的坑
- 父元素不能有
overflow: hidden，否则 sticky 失效 - 父元素高度不够时 sticky 效果不明显