position定位详解

为什么要搞清楚 position

写页面布局时，很多诡异的"元素飞了""层级盖不住""滚动跟不上"问题，根源都出在 position 上。position 控制的是元素在页面中的定位方式——它相对谁定位、是否脱离文档流、层叠优先级如何计算。这些问题在面试里也是高频考点，尤其是 absolute 的参照物判定和 sticky 的触发条件。

本文逐个拆解五种 position 值：static、relative、absolute、fixed、sticky，讲清楚每种定位的参照物、文档流行为、层叠上下文关系，以及生产中的常见坑。

static：默认的文档流定位

position: static 是所有元素的默认值。元素按照正常文档流排列，块级元素从上到下，行内元素从左到右。

.box {
  position: static;
  /* top、right、bottom、left、z-index 均无效 */
}

关键特征：

元素处于正常文档流中，不脱离。
top、right、bottom、left 属性不生效。
z-index 属性不生效。
不会创建新的层叠上下文。

static 几乎不需要主动设置，唯一的使用场景是覆盖继承或外部样式中已有的定位声明，把元素"打回"文档流。

relative：相对自身原始位置偏移

position: relative 让元素在文档流中保留原始占位，但视觉上可以通过 top、left 等属性做偏移。

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

关键特征：

不脱离文档流，原始位置的空间仍然保留。周围元素不会因为它的偏移而重新排列。
偏移的参照物是元素自身在文档流中的原始位置。
z-index 生效，并且会创建新的层叠上下文（当 z-index 值不是 auto 时）。
常用作 absolute 子元素的定位容器。

relative 的典型用途

作为 absolute 的定位参照：给父元素加 position: relative，子元素用 position: absolute 就能相对父元素定位。这是最常见的用法。
微调元素位置：在不影响文档流的前提下，做小幅度的视觉偏移。
控制层叠顺序：配合 z-index 控制元素的前后遮盖关系。

/* 典型的父相子绝模式 */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

absolute：脱离文档流，相对最近定位祖先

position: absolute 是面试中问得最多的定位方式，核心问题就一个：它相对谁定位？

答案是：相对最近的 position 值不是 static 的祖先元素。如果所有祖先都是 static，则相对初始包含块（通常是 viewport）定位。

.parent {
  position: relative; /* 成为定位参照 */
  width: 300px;
  height: 200px;
}
.child {
  position: absolute;
  top: 10px;
  right: 10px;
  /* 相对 .parent 的 padding box 右上角偏移 */
}

关键特征：

脱离文档流，原始位置不再保留，周围元素会重新排列填补空缺。
参照物是最近的非 static 祖先元素的 padding box。
z-index 生效，且会创建新的层叠上下文（当 z-index 值不是 auto 时）。
元素宽度会收缩为内容宽度（shrink-to-fit），不再默认撑满父容器。

面试高频追问：absolute 的参照物判定

逐级向上查找祖先元素的 position 值：

找到第一个 position 不是 static 的祖先 → 相对它的 padding box 定位。
所有祖先都是 static → 相对初始包含块定位。

注意，不只是 relative 能当参照。absolute、fixed、sticky 的祖先同样可以作为参照物。另外，transform、filter、perspective 等属性也会创建新的包含块，影响 absolute 的参照物判定，这是一个容易忽略的坑。

.grandparent {
  position: static;
}
.parent {
  /* 没有设置 position，默认 static */
  transform: translateX(0); /* 这会创建新的包含块！ */
}
.child {
  position: absolute;
  /* 参照物变成 .parent 而不是更上层 */
}

absolute 的常见布局技巧

水平垂直居中：

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

铺满父容器：

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* 等价于 inset: 0; */
}

fixed：相对视口固定

position: fixed 让元素相对于浏览器视口定位，页面滚动时位置不变。

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

关键特征：

脱离文档流。
参照物是视口（viewport），不是任何 DOM 元素。
z-index 生效，始终创建新的层叠上下文。
页面滚动时，元素位置不动。

fixed 的经典坑：transform 导致失效

跟 absolute 类似，如果 fixed 元素的某个祖先设置了 transform、filter、will-change 或 perspective，fixed 的参照物会从视口降级为该祖先元素，表现得像 absolute。

.wrapper {
  transform: translateZ(0); /* 触发 GPU 加速，但会影响内部 fixed 元素 */
}
.modal {
  position: fixed;
  /* 本该相对视口，现在变成相对 .wrapper */
  top: 0;
  left: 0;
}

这在使用 CSS 动画、开启 GPU 加速、或使用某些 UI 库时经常踩到。排查方法：逐级检查祖先元素是否存在 transform、filter、backdrop-filter、perspective、will-change: transform 等属性。

fixed 的典型场景

顶部/底部导航栏
悬浮操作按钮（FAB）
全屏遮罩和弹窗

使用 fixed 时要注意给页面内容留出对应的 padding 或 margin，避免被固定元素遮挡。

sticky：文档流 + 滚动吸附

position: sticky 是 relative 和 fixed 的混合体。元素在正常文档流中，但当滚动到指定阈值时，会"粘"在容器的某个位置。

.section-header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
}

关键特征：

不脱离文档流，在未触发粘性时表现与 relative 一致。
滚动到 top/bottom/left/right 指定的阈值时，元素固定在该位置。
粘性效果的作用范围限定在最近的滚动祖先和包含块内。
始终创建新的层叠上下文。

sticky 的触发条件

sticky 要正常工作，必须同时满足以下条件：

指定至少一个方向的阈值：必须设置 top、bottom、left、right 中的至少一个。
滚动容器存在且可滚动：最近的滚动祖先的内容必须超出自身尺寸，产生滚动。
父元素的高度必须大于 sticky 元素自身：sticky 元素的粘性范围限制在父元素内。如果父元素的高度等于 sticky 元素的高度，则没有滚动空间，sticky 不会生效。
祖先元素不能有 overflow: hidden、overflow: auto 或 overflow: scroll（除非该祖先本身就是预期的滚动容器）：这些属性会改变滚动容器的判定。

sticky 不生效的常见排查清单

问题	原因
没有设置 top/bottom/left/right	缺少阈值，浏览器不知道何时触发粘性
父元素高度不足	父元素高度等于 sticky 元素高度，没有滚动空间
祖先有 overflow: hidden	改变了滚动容器判定，粘性被"截断"
祖先有 overflow: auto/scroll 但没有实际滚动	内容未溢出，无滚动行为
父元素设置了 contain: paint	创建了新的布局上下文，影响粘性范围

面试高频追问：sticky 的兼容性

position: sticky 在现代浏览器中已广泛支持（Chrome 56+、Firefox 32+、Safari 13+、Edge 16+）。主要兼容性问题集中在：

IE 全系不支持，需要降级为 fixed 或使用 JavaScript polyfill。
旧版 Safari 曾需要 -webkit-sticky 前缀，现已不需要。
表格元素：<thead> 和 <tr> 上的 sticky 行为在部分浏览器中不一致，建议将 sticky 设置在 <th> 上。

五种定位方式对比

属性值	脱离文档流	参照物	z-index	层叠上下文
static	否	无	不生效	不创建
relative	否	自身原始位置	生效	z-index 非 auto 时创建
absolute	是	最近非 static 祖先的 padding box	生效	z-index 非 auto 时创建
fixed	是	视口	生效	始终创建
sticky	否（粘附时也不脱离）	最近滚动祖先	生效	始终创建

z-index 与层叠上下文

position 和 z-index 是紧密关联的。z-index 只在定位元素（position 不是 static）上生效。

层叠上下文的形成条件

以下情况会创建新的层叠上下文：

根元素 <html>
position 为 absolute 或 relative，且 z-index 值不是 auto
position 为 fixed 或 sticky
flex/grid 容器的子元素，且 z-index 值不是 auto
opacity 值小于 1
transform、filter、perspective、clip-path 等属性值不为 none
will-change 指定了上述任一属性

z-index 比较的规则

z-index 只在同一层叠上下文内比较。不同层叠上下文中的元素，z-index 值再大也无法跨越层叠上下文的层级。

/* 父A 的 z-index: 1 */
.parent-a { position: relative; z-index: 1; }
/* 父B 的 z-index: 2 */
.parent-b { position: relative; z-index: 2; }

/* 子A 的 z-index 再大也盖不过 父B 及其子元素 */
.child-a { position: absolute; z-index: 9999; }
.child-b { position: absolute; z-index: 1; }

这里 .child-a 虽然 z-index 为 9999，但它属于 .parent-a 的层叠上下文，而 .parent-a 的 z-index（1）小于 .parent-b（2），所以 .child-a 始终在 .child-b 下面。

面试中如果被问到"z-index 很大但还是被遮挡了是为什么"，核心答案就是：它们不在同一个层叠上下文中。

常见布局场景与方案选择

弹窗（Modal）

弹窗通常用 fixed 定位 + 全屏遮罩层。注意点：

遮罩层 inset: 0 铺满视口。
弹窗本身居中可用 top: 50%; left: 50%; transform: translate(-50%, -50%)。
z-index 设置足够高，但要注意是否被祖先的层叠上下文限制。
如果祖先有 transform，fixed 会降级——解决方案是把弹窗 DOM 挂到 <body> 下（React 中用 Portal）。

吸顶导航

两种方案：

fixed 方案：始终固定在顶部，需要给 body 加 padding-top 补偿高度。
sticky 方案：随文档流滚动，到达顶部后吸附。更自然，不需要额外补偿空间，但要注意 overflow 的影响。

工具提示（Tooltip）

通常用 absolute 定位，父元素设为 relative。好处是 tooltip 跟随目标元素移动，不受页面滚动影响。

总结

static 是默认值，几乎不需要主动使用，除非要"还原"定位。
relative 最常见的用途是作为 absolute 子元素的定位容器，而非用来做大幅偏移。
absolute 的核心是参照物判定——沿 DOM 树向上找第一个非 static 祖先，找不到就用初始包含块。transform 等属性会意外改变参照物。
fixed 相对视口定位，适合固定导航和弹窗，但 transform 祖先会让它"失灵"。
sticky 是 relative 和 fixed 的混合体，触发条件较多，排查问题时重点检查阈值设置、父元素高度和祖先 overflow。
z-index 只在同一层叠上下文内比较。"z-index 设了很大还是被挡住"几乎都是层叠上下文的问题。

理解 position 的关键不在于记住五个值的定义，而是搞清楚参照物是谁、是否脱离文档流、层叠上下文如何影响 z-index。把这三个问题想明白，绝大多数定位相关的 bug 都能快速定位。