彻底掌握 CSS 定位：深入理解 relative、absolute、fixed 与 sticky 的原理与实战
一、前言：为什么要学定位？
-
定位是 CSS 布局的核心之一。
-
控制元素位置、层级、浮动、吸顶、悬浮、弹窗都离不开它。
-
掌握定位 = 掌握网页布局的自由度。
二、定位的基础概念
1. 什么是定位（position）
-
决定元素在页面中的位置计算方式。
-
决定 top / right / bottom / left 是否生效。
-
影响是否“脱离文档流”。
2. 文档流（normal flow）
-
指浏览器默认的元素排列方式：从上到下、从左到右。
-
元素一旦脱离文档流，不再影响其他元素的位置。
三、四种定位方式详解
1. relative — 相对定位《相对自身原来的位置》
-
特点：
-
相对于元素自身原始位置偏移；
-
不脱离文档流；
-
原本位置仍保留。
-
-
用途：
-
微调元素；
-
为子元素的绝对定位提供参照。
-
-
示例：
.parent { position: relative; }
.child { position: absolute; top: 0; right: 0; }
2. absolute — 绝对定位
-
特点：
-
脱离文档流；
-
相对于最近的非 static 父元素定位；
-
没有定位父时，默认相对于 body。
-
默认情况下，所有元素的定位方式都是：position: static;非staticposition: relative;或 position: absolute;或 position: fixed;或 position: sticky;
-
用途：
悬浮框、弹窗、下拉菜单、气泡提示等。
-
示例：
.menu {position: absolute;top: 50px;left: 0;
}
3. fixed — 固定定位
-
特点：
-
脱离文档流；
-
相对于**视口（浏览器窗口）**定位；
-
页面滚动时不会移动。
-
-
用途：
固定导航栏、返回顶部按钮、浮动客服。
- 示例：
.button {position: fixed;bottom: 20px;right: 20px;
}
4. sticky — 粘性定位
-
特点：
-
结合 relative + fixed 特性；
-
在滚动到设定阈值前为相对定位；
-
超过阈值后“粘住”视口。
-
-
用途：
吸顶导航栏、章节标题、滚动索引。
- 示例：
<div class="container"><div class="header">固定头部</div><div class="content"><div class="sticky">我是粘性标题</div><p>内容内容内容...</p><p>内容内容内容...</p><p>内容内容内容...</p><p>内容内容内容...</p><p>内容内容内容...</p></div>
</div>.container {height: 300px;overflow: auto; /* 必须可滚动 */border: 2px solid gray;
}.sticky {position: sticky;top: 0; /* 滚动到顶部时粘住 */background: yellow;padding: 10px;
}效果：
一开始 .sticky 跟着内容一起滚；
当它的顶部到达容器顶部时，就“贴住”了；
继续往下滚，当父容器滚完，它就跟着一起离开视口。
四、四种定位的对比总结
| 属性 | 是否脱离文档流 | 相对谁定位 | 是否随滚动移动 | 常见用途 |
|---|---|---|---|---|
relative | ❌ 否 | 自身原位置 | ✅ 是 | 微调、父参考 |
absolute | ✅ 是 | 最近定位父元素 | ✅ 是 | 弹窗、提示框 |
fixed | ✅ 是 | 浏览器窗口 | ❌ 否 | 悬浮按钮 |
sticky | ❌（部分） | 最近滚动容器 | 部分 | 吸顶导航 |