一文搞懂 CSS 定位：relative、absolute、fixed、sticky

在前端开发中，CSS 的 position 属性是布局的核心之一。理解不同定位方式的原理和使用场景，能让你轻松应对各种页面布局需求。

今天我们就来梳理一下常见的几种定位方式：relative、absolute、fixed 和 sticky，以及它们与文档流的关系。

---

🌐 什么是文档流？

文档流是 HTML 元素默认的布局方式：

• 块级元素垂直排列
• 行内元素水平排列
• 遵循从上到下、从左到右的自然顺序

当一个元素脱离了文档流，它不再占据原来的位置，后面的元素会"填补"它的空间。

---

🔹 1. position: relative ------ 相对定位

position: relative;

• 相对于自身原本位置进行偏移
• 不会脱离文档流，原位置依然保留
• 后续元素仍按标准流布局

✅ 适用于需要微调位置但不破坏布局的场景，比如配合 top/bottom/left/right 调整元素位置。

---

🔹 2. position: absolute ------ 绝对定位

position: absolute;

• 脱离文档流，不再占据空间
• 相对于最近的 拥有定位属性的父元素 定位
• 如果父元素没有定位，则以 body 或最近非 static 的祖先为参考

⚠️ 使用时注意：绝对定位的元素会"漂浮"在其他元素之上，需谨慎控制层级（z-index）。

---

🔹 3. position: fixed ------ 固定定位

position: fixed;

• 以浏览器窗口为参照物
• 脱离文档流
• 滚动页面时，元素位置固定不变

✅ 常用于顶部导航栏、侧边栏等需要"固定显示"的组件。

---

🔹 4. position: sticky ------ 粘性定位

position: sticky;

• 结合 relative 和 fixed 的特性
• 默认行为像 relative
• 当滚动到指定阈值（如 top: 0）时，变为 fixed，固定在视口某处

💡 例如：粘性标题、悬浮菜单，用户体验更友好。

.sticky-header {
  position: sticky;
  top: 0;
  background: #fff;
}

---

🔹 5. position: static ------ 静态定位（默认）

position: static; /* 默认值 */

• 元素按照正常文档流布局
• top、bottom、left、right 无效
• 一般不需要显式声明，除非要重置定位

---

🧩 总结对比表

定位方式	是否脱离文档流	参考对象	适用场景
relative	❌ 不脱离	自身原始位置	微调位置
absolute	✅ 脱离	最近定位父元素或 body	弹窗、遮罩层
fixed	✅ 脱离	浏览器窗口	固定导航、悬浮按钮
sticky	部分脱离	视口 + 文档流	粘性头部、侧边栏
static	❌ 不脱离	无	默认状态，无需设置

---

✅ 小贴士

• 使用 absolute 时，记得给父容器设置 position: relative，避免定位混乱。
• sticky 需要设置 top/bottom 等属性才生效。
• display: none 会隐藏元素且不占空间，与定位无关，但常被混淆。