CSS 定位与坐标系
大多数教程告诉你 position: absolute 做什么。这篇告诉你它怎么思考——作为一个带原点、坐标轴和 containing block 的坐标系。
实时演示：切换定位模式
选择一个 position 值并拖动滑块。红色方块会重新定位，坐标读数显示它的原点在哪里，以及 top/left 如何转换为像素偏移。这是理解 relative 和 absolute 差异最快的方法。
定位即坐标系，不是布局规则
这是让 CSS 定位豁然开朗的思维转换：top、right、bottom 和 left 是坐标，不是边距。当你写 top: 50px，你是在把元素放到距某个特定原点 50 像素的位置。问题是：什么的原点？
每个已定位元素都存在于一个 containing block（包含块）中——定义其坐标原点的方框。把它想象成该元素的 (0, 0) 点。containing block 因你使用的 position 值不同而不同，这也是 CSS 定位最令人困惑的地方。
对于 position: absolute 和 position: fixed，元素完全脱离了正常文档流。它的坐标是相对于 containing block 测量的，而不是相对于它的兄弟元素或正常流中的父元素。这就是为什么绝对定位元素可以覆盖其他内容——它已经离开了文档流的坐标系。
从坐标系角度看五种 position 值
| 值 | 坐标原点 (Containing Block) | 在正常流中？ | 常见用途 |
|---|
static (默认) | 无原点——top/left 被忽略 | 是，按文档顺序 | 不需要显式定位的所有内容 |
relative | 元素在流中的原始位置 | 是，但视觉上有偏移（原始空间保留） | 微调、为子元素建立 containing block |
absolute | 最近的已定位祖先（任何非 static 值），或初始 containing block | 否——脱离文档流，其他元素填充其空间 | 提示框、徽章、相对于父元素的覆盖层 |
fixed | 视口（浏览器窗口），除非祖先有 transform/filter/perspective | 否——脱离文档流 | 固定导航栏、悬浮按钮、cookie 横幅 |
sticky | 最近的滚动祖先；滚动时在流相对和固定之间切换 | 是，直到达到滚动阈值 | 表头、滚动时固定的区域导航 |
上表是参考。现在让我们拆解三个最容易造成实际混淆的问题。
Containing Block：大多数教程跳过的概念
如果你从这页带走一件事，那就是：position: absolute 不是相对于父元素。它是相对于最近的已定位祖先——从当前元素沿 DOM 树向上找到的第一个 position 值不是 static 的祖先。
这几乎坑了每个人第一次。你给子元素加 position: absolute，设 top: 0; left: 0;，元素飞到了页面角落而不是父元素角落。原因：父元素的 position 是 static（默认值），所以浏览器沿 DOM 树向上寻找已定位的祖先，找不到，就用视口作为 containing block。
修复方法总是相同的：给父元素加 position: relative。这建立了父元素作为 containing block，现在子元素的 top/left 就从父元素的 padding 边缘开始测量。
经验法则：如果你在子元素上使用 position: absolute，父元素几乎肯定需要 position: relative 且不带偏移。这个模式——relative 父元素 + absolute 子元素——是覆盖层、提示框和徽章定位的主力。
层叠上下文：Z 轴坐标系
定位处理 X 和 Y 轴。z-index 处理 Z 轴——但它的工作方式跟大多数人想的不一样。z-index 只在层叠上下文（stacking context）内部生效，而层叠上下文跟整个文档不是一回事。
把层叠上下文想象成一个隔离的图层。它内部的元素可以相互堆叠，但整个图层作为一个整体与其他图层定位。所以一个层叠上下文内的 z-index: 9999 仍然可能在另一个不同且更高层级层叠上下文的 z-index: 1 后面。
什么创建层叠上下文？
- 根元素（
<html>）
position: absolute 或 position: relative 且 z-index 设为非 autoposition: fixed 或 position: sticky（无论 z-index 如何都总是创建）- 任何
opacity 小于 1 的元素
- 任何有
transform、filter、perspective、backdrop-filter 或 will-change 的元素
mix-blend-mode 设为非 normalisolation: isolate
实际后果：如果你的 z-index: 9999 模态框出现在 z-index: 10 下拉菜单后面，几乎可以确定是因为模态框在一个层叠上下文内（由祖先的 transform 或 opacity 创建），而这个层叠上下文本身在下拉菜单的层叠上下文下方。调高模态框的 z-index 无济于事——你需要把模态框移出祖先的层叠上下文，或者移除创建它的属性。
视口单位与响应式定位
当你使用 position: fixed 或 position: absolute 加百分比偏移时，这些百分比是相对于 containing block 的尺寸，而不是元素自身的大小。top: 50% 意味着 containing block 高度的 50%。
视口单位让你相对于实际浏览器窗口定位：
| 单位 | 相对于 | 适用场景 |
|---|
vw / vh | 视口宽/高的 1% | 全屏覆盖层、固定侧边栏 |
dvw / dvh | 动态视口的 1%（考虑移动端地址栏） | 移动优先的固定定位——避免 iOS Safari 地址栏跳动 |
svw / svh | 最小可能视口的 1% | 必须永不被浏览器 UI 遮挡的元素 |
lvw / lvh | 最大可能视口的 1% | 需要全出血背景图时 |
dvh / dvw / svh / lvh 单位较新，解决了移动端 Safari 的问题：100vh 包含地址栏后面的区域，导致内容被截断。对于需要填满可见视口的元素，使用 100dvh 代替 100vh。
实际可用的实战模式
居中模态框覆盖层
到处都能用的居中模态框模式。关键是用 position: fixed 加 inset: 0（四边的简写）和 place-items: center：
.modal-backdrop {
position: fixed;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
background: rgba(0,0,0,.5);
display: grid;
place-items: center; /* centers the modal */
z-index: 1000;
}
.modal {
background: #fff;
border-radius: 12px;
padding: 2rem;
max-width: 90vw;
max-height: 90vh;
overflow: auto;
}
粘性表头
表头上的 position: sticky 是滚动时保持列标签可见的最简洁方法。关键是：top: 0 定义何时粘住，滚动容器必须是表格的滚动父元素：
.table-scroll {
max-height: 400px;
overflow: auto;
}
.table-scroll thead th {
position: sticky;
top: 0;
background: #fff; /* must be opaque */
z-index: 1;
}
悬停提示框
relative 父元素 + absolute 子元素的提示框模式。提示框默认隐藏，悬停时显示：
.tooltip-trigger {
position: relative; /* containing block for tooltip */
display: inline-block;
}
.tooltip {
position: absolute;
bottom: 100%; /* sits above the trigger */
left: 50%;
transform: translateX(-50%); /* horizontal center */
margin-bottom: 8px;
padding: .5rem .75rem;
background: #1a1a1a;
color: #fff;
border-radius: 6px;
font-size: .85rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .2s;
}
.tooltip-trigger:hover .tooltip {
opacity: 1;
}
决策框架：该用哪种定位
别再死记每个值是做什么的了。用这个决策流程：
元素需要覆盖其他内容或脱离正常文档流吗？
不需要 → 用 static（默认）。用 Flexbox 或 Grid 做布局。
需要，但只在交互时（下拉菜单、提示框）→ 父元素 relative，子元素 absolute。
元素在页面滚动时需要保持可见吗？
是的，始终 → fixed（检查祖先是否有 transform！）
是的，但只在滚动超过某个点之后 → sticky。
你只是需要从正常位置微调一下元素吗？
是的 → relative 加小的 top/left 偏移。
常见问题
为什么我的 z-index:9999 元素出现在 z-index:1 元素后面？
层叠上下文。你的 z-index:9999 元素很可能在一个层叠上下文内（由祖先的 transform、opacity 或 position:fixed 创建），而这个层叠上下文位于包含 z-index:1 元素的层叠上下文下方。调高数字没用。把元素移出创建层叠上下文的祖先，或者移除那个属性。
为什么我的 position:fixed 元素跟着页面滚动？
某个祖先有 transform、filter、perspective、will-change 或 contain。这些属性为固定定位的后代创建了 containing block，使它们表现得像 absolute。找到并移除祖先上的那个属性，或者把 fixed 元素移到 DOM 树更高层。
position: relative 和 margin 偏移有什么区别？
两者都在视觉上移动元素，但 position: relative 保留元素在布局中的原始空间——其他元素不会回流填充空隙。margin 移动元素并导致周围元素回流。当你想要微调而不影响兄弟元素时用 relative。
应该用 inset 代替 top/right/bottom/left 吗？
是的，对现代代码来说。inset: 0 是 top:0; right:0; bottom:0; left:0 的简写。你也可以写 inset: 10px 20px 表示垂直/水平。更短、更易读，浏览器支持也很好（97%+）。
position 会影响性能吗？
position: fixed 和 position: sticky 在滚动时可能导致更频繁的重绘，因为浏览器必须在每一帧重新定位它们。添加 will-change: transform 可以帮助浏览器优化，但过度使用 will-change 会增加内存消耗。如果看到滚动卡顿，在真实设备上测试。
如何相对于视口中心定位？
用 position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 或现代方法：position: fixed; inset: 0; margin: auto; width: 你的宽度; height: 你的高度;。两者都能居中元素。transform 方法对未知尺寸更灵活。