CSS-深度解析 Position 五大定位模式在 CSS 布局中，position 属性是控制元素“脱离常规”的关键。

在 CSS 布局中，position 属性是控制元素“脱离常规”的关键。无论是想要悬浮的导航栏，还是精准重叠的图层，都离不开对定位属性的深入理解。本文将带你搞懂 relative、absolute、fixed 与 sticky 的底层逻辑。

一、 Position 核心参数详解

属性值	含义	布局表现	参考物
`static`	默认值	正常文档流布局。	无（Top/Left 等属性无效）。
`relative`	相对定位	不脱离文档流，占据原始空间。	元素在文档流中的原始位置。
`absolute`	绝对定位	完全脱离文档流，不占位。	最近的非 static 祖先元素。
`fixed`	固定定位	完全脱离文档流，不占位。	浏览器窗口 (Viewport) 。
`sticky`	粘性定位	混合模式，特定条件下生效。	最近的滚动祖先元素。

这些偏移属性仅在 position 不为 static 时生效。它们定义了元素边缘相对于参考物的距离。

Relative (相对自身) ：

设置 left: 20px，元素会相对于它原本在文档流中的位置向右移动 20px。它原来的位置依然被保留，不会被后续元素顶替。
Absolute (相对祖先) ：

设置 left: 0，元素会紧贴最近的已定位（非 static）祖先元素的左内边缘。
Fixed (相对窗口) ：

设置 right: 10px; bottom: 10px;，元素将永久停留在浏览器窗口的右下角，不随页面滚动而移动。

表现：它是 relative 和 fixed 的结合体。
示例：top: 0; position: sticky;

当页面未滚动到该元素时，它是 relative（随内容滚动）；当元素滚动到视口顶部时，它会像 fixed 一样“粘”在顶部，直到其父容器消失在视口中。
常用场景：表格标题行固定、侧边栏跟随。

误区修正：很多人认为绝对定位是相对于“父元素”。

准确定义：是相对于最近的、非 static 定位的祖先元素。如果向上找遍了所有祖先元素都没有定位，则相对于 初始包含块（通常是 <html>） 定位。