彻底掌握 CSS 定位：深入理解 relative、absolute、fixed 与 sticky 的原理与实战

一、前言：为什么要学定位？

定位是 CSS 布局的核心之一。
控制元素位置、层级、浮动、吸顶、悬浮、弹窗都离不开它。
掌握定位 = 掌握网页布局的自由度。

二、定位的基础概念

1. 什么是定位（position）

决定元素在页面中的位置计算方式。
决定 top / right / bottom / left 是否生效。
影响是否"脱离文档流"。

2. 文档流（normal flow）

指浏览器默认的元素排列方式：从上到下、从左到右。
元素一旦脱离文档流，不再影响其他元素的位置。

三、四种定位方式详解

1. relative --- 相对定位《相对自身原来的位置》

特点：
- 相对于元素自身原始位置偏移；
- 不脱离文档流；
- 原本位置仍保留。
用途：
- 微调元素；
- 为子元素的绝对定位提供参照。
示例：

bash 复制代码

.parent { position: relative; }
.child { position: absolute; top: 0; right: 0; }

2. absolute --- 绝对定位

特点：
- 脱离文档流；
- 相对于最近的非 static 父元素定位；
- 没有定位父时，默认相对于 body。

bash 复制代码

	默认情况下，所有元素的定位方式都是：
    	position: static;
	非static
		position: relative;
		或 position: absolute;
		或 position: fixed;
		或 position: sticky;

用途：

悬浮框、弹窗、下拉菜单、气泡提示等。
示例：

bash 复制代码

.menu {
  position: absolute;
  top: 50px;
  left: 0;
}

3. fixed --- 固定定位

特点：
- 脱离文档流；
- 相对于**视口（浏览器窗口）**定位；
- 页面滚动时不会移动。
用途：

固定导航栏、返回顶部按钮、浮动客服。

示例：

bash 复制代码

.button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

4. sticky --- 粘性定位

特点：
- 结合 relative + fixed 特性；
- 在滚动到设定阈值前为相对定位；
- 超过阈值后"粘住"视口。
用途：

吸顶导航栏、章节标题、滚动索引。

示例：

bash 复制代码

<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>

bash 复制代码

.container {
  height: 300px;
  overflow: auto; /* 必须可滚动 */
  border: 2px solid gray;
}

.sticky {
  position: sticky;
  top: 0; /* 滚动到顶部时粘住 */
  background: yellow;
  padding: 10px;
}

效果：

一开始 .sticky 跟着内容一起滚；

当它的顶部到达容器顶部时，就"贴住"了；

继续往下滚，当父容器滚完，它就跟着一起离开视口。

四、四种定位的对比总结

属性	是否脱离文档流	相对谁定位	是否随滚动移动	常见用途
`relative`	❌ 否	自身原位置	✅ 是	微调、父参考
`absolute`	✅ 是	最近定位父元素	✅ 是	弹窗、提示框
`fixed`	✅ 是	浏览器窗口	❌ 否	悬浮按钮
`sticky`	❌（部分）	最近滚动容器	部分	吸顶导航