CSS 定位详解：relative、absolute、fixed、sticky 与 static
CSS 中的 position 属性用于控制元素的定位方式，常见的取值包括 relative、absolute、fixed、sticky 和 static。理解它们的行为差异，尤其是是否脱离文档流、定位参考点等，对布局开发至关重要。
文档流基础
文档流是 HTML 元素默认的布局方式：块级元素垂直排列，行内元素水平排列，整体遵循从上到下、从左到右的自然顺序。元素若“脱离文档流”，则不再占据原有空间，可能影响其他元素的布局。
relative（相对定位）
- 相对于元素在文档流中的原始位置进行偏移。
- 不会脱离文档流，原位置仍被保留，后续元素仍按标准流对待它。
- 常用于微调位置或作为绝对定位子元素的参考容器。
.parent {
position: relative;
left: 100px;
top: 100px;
}
absolute（绝对定位）
- 脱离文档流，不占据原有空间。
- 定位参考点为最近的非
static定位祖先元素；若无，则以<body>为基准。 - 常用于弹窗、下拉菜单等需要精确控制位置的场景。
.child {
position: absolute;
right: 100px;
}
fixed（固定定位）
- 脱离文档流。
- 以浏览器视口为参考点，不随页面滚动而移动。
- 适用于导航栏、悬浮按钮等需固定显示的元素。
.child {
position: fixed;
bottom: 100px;
right: 100px;
}
sticky（黏连定位）
- 行为介于
relative与fixed之间。 - 在滚动到达指定阈值（如
top: 100px）前表现为相对定位；超过后变为固定定位。 - 需指定
top、bottom等阈值才生效。 - 不脱离文档流，但滚动时会“粘”在视口某处。
.box {
position: sticky;
top: 100px;
}
static（静态定位）
- 默认定位方式，元素按正常文档流排列。
- 设置
left、top等偏移属性无效。 - 可用于重置已定位元素，使其回归标准流。
// 示例：3 秒后取消定位
oParent.style.position = 'static';
总结对比
| 定位类型 | 是否脱离文档流 | 定位参考点 | 典型用途 |
|---|---|---|---|
| static | 否 | 无（忽略偏移属性） | 默认布局 |
| relative | 否 | 自身原始位置 | 微调、作为 absolute 容器 |
| absolute | 是 | 最近非 static 祖先或 body | 弹层、精准定位 |
| fixed | 是 | 浏览器视口 | 固定导航、悬浮按钮 |
| sticky | 否（视觉上固定） | 滚动阈值触发 fixed 行为 | 表头、侧边栏吸附 |
掌握这些定位机制，能更灵活地实现复杂页面布局。
本文基于实际代码示例与规范总结，适用于前端开发者系统理解 CSS 定位模型。