CSS 定位（Position）完全解析：掌控元素布局的底层逻辑

        CSS 定位是布局体系中仅次于 Flex/Grid 的核心能力，它决定了元素在页面上的“放置方式”——是随文档流自然排列，还是脱离文档流自由移动，或是固定在窗口某个角落。熟练掌握position的五个属性值及其配套的top/right/bottom/left/z-index，能让你轻松实现悬浮导航、模态框、吸顶效果、工具提示等常见交互。本文将从文档流概念入手，逐步拆解每种定位模式的行为差异、应用场景及常见陷阱。

一、定位前提：理解常规流与脱离文档流

在讨论定位之前，必须先建立两个概念：

• 常规流（Normal Flow）：块级元素自上而下垂直排列，行内元素从左到右水平排列，元素占据的空间由文档结构天然决定。
• 脱离文档流：元素不再占用原位置的空间，后续元素会向上移动填补空缺，就像那个元素“浮起来”了一样。

relative不会脱离文档流；absolute和fixed会脱离文档流；sticky在阈值内不脱离，超出阈值后类似于fixed行为。

二、position 的五种取值详解

1.static—— 默认值，无定位

所有元素默认都是static。此时top/left等偏移属性无效，元素完全遵循常规流布局。

div { position: static; /* 无需显式声明 */ }

场景：重置某个从其他定位状态继承来的元素为常规流。

2.relative—— 相对自身原位置偏移

元素仍在文档流中，占据原始空间。通过top/left相对于其原本在常规流中的位置进行偏移，但周围元素不受影响（留白保留）。

.relative-box { position: relative; top: 20px; left: 30px; /* 元素向右下偏移，其他元素不会挤过来 */ }

典型用途：

• 微调图标或文字位置（替代margin的不精确偏移）。
• 作为absolute子元素的包含块（见后文）。
• 配合z-index提升层级（relative会创建层叠上下文）。

3.absolute—— 绝对定位，脱离文档流

元素完全脱离文档流，不再占据空间。其位置相对于最近的具有非static定位的祖先元素（即