彻底掌握 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;
	非static
		position: 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	❌（部分）	最近滚动容器	部分	吸顶导航