CSS 层叠上下文：从“谁在前，谁在后”说起

在前端开发中，层叠上下文（Stacking Context） 是一个常被忽略但非常重要的概念。它决定了页面中元素在 Z 轴方向上的堆叠顺序 ------ 简单来说就是："哪个元素显示在前面，哪个在后面"。

如果你曾经遇到过这样的问题：

为什么设置了 z-index 却不起作用？
弹窗怎么被遮住了？
为什么定位元素总是跑偏？

那这篇文章将为你揭开 CSS 层叠上下文 的神秘面纱。

一、什么是层叠上下文？

我们可以把网页想象成一张立体的画布，除了 X 轴和 Y 轴之外，还有一个 Z 轴，用来决定哪些元素在上，哪些在下。

生活类比 ：

就像你在桌子上放了几本书，有的书盖在别的书上面，有的则被压在下面。你看到的是最上面那本封面。这就是一种"层叠"的效果。

层叠上下文 就是浏览器为了管理这些元素的"堆叠顺序"而创建的一个独立空间。每个层叠上下文都有自己的层级体系，互不干扰。

二、层叠上下文是如何创建的？

并不是所有元素都处于同一个层叠上下文中。有些操作会触发一个新的层叠上下文生成。

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

条件	触发新层叠上下文
根元素 `<html>`	✅
设置了 `position: absolute / relative / fixed / sticky` 并且 `z-index` 不为 `auto`	✅
使用了 `opacity < 1`	✅
使用了 `transform`（如 `translate`, `scale`）	✅
使用了 `filter`（如模糊、透明度）	✅
使用了 `will-change`	✅
使用了 `isolation: isolate`	✅

三、理解 z-index 和层叠顺序

3.1 z-index 的作用范围

很多初学者认为只要设置了 z-index，就能控制元素的前后顺序。但实际上，z-index 只在同一个层叠上下文中起作用。

举个例子：

html 复制代码

<div class="box box1">盒子1</div>
<div class="box box2">盒子2</div>

css 复制代码

.box {
  position: absolute;
  width: 100px;
  height: 100px;
}
.box1 {
  background: red;
  top: 50px;
  left: 50px;
  z-index: 10;
}
.box2 {
  background: blue;
  top: 80px;
  left: 80px;
  z-index: 5;
}

在这个例子中，.box1 显示在 .box2 上面，因为它们在同一个层叠上下文中，z-index 更大。

3.2 层叠上下文之间的比较

不同层叠上下文中的元素，即使子元素的 z-index 再大，也不能突破父级上下文的限制。

来看一个经典案例：

html 复制代码

<div class="parentA">
  <div class="childA">我是A的孩子</div>
</div>

<div class="parentB">
  <div class="childB">我是B的孩子</div>
</div>

css 复制代码

.parentA {
  position: relative;
  z-index: 1;
}

.parentB {
  position: relative;
  z-index: 2;
}

.childA {
  position: absolute;
  z-index: 1000;
}

.childB {
  position: absolute;
  z-index: 1;
}

尽管 .childA 的 z-index 比 .childB 大得多，但由于它的父容器 .parentA 的 z-index 比 .parentB 小，所以最终 .childA 仍然显示在 .childB 的下面。

生活类比 ：

这就像两个家庭各有一个孩子。虽然孩子都很优秀，但如果整个家庭的地位不如另一个家庭，那么这个孩子的社会地位也会受影响。

四、层叠顺序的优先级规则

在同一层叠上下文中，元素的堆叠顺序是由以下因素决定的：

背景和边框
负 z-index 元素
非定位块元素
非浮动内联元素
浮动元素
正 z-index 定位元素

也就是说，z-index 值越大的定位元素，越靠前显示。

五、实战案例解析

案例一：弹窗被遮挡

你写了一个弹窗组件，设置好了 z-index: 9999，却发现它被某个导航栏或者广告条遮住了。

原因很可能是那个导航栏或广告条的父级创建了更高的层叠上下文，导致你的弹窗虽然 z-index 很高，却无法超越它。

解决方案：

把弹窗放在根层叠上下文中（如直接挂载到 <body> 下）
或者确保弹窗的父级没有创建低层级的上下文

案例二：使用 transform 后 z-index 失效

有时候你会发现，给一个元素加了 transform: translateX(10px) 后，它的 z-index 突然失效了。

这是因为 transform 会创建一个新的层叠上下文。原本的层级关系可能因此被打乱。

解决方法：

明确知道当前元素是否属于哪个层叠上下文
必要时调整父级结构，避免意外创建新上下文

案例三：透明度影响层叠顺序

当你给一个元素设置了 opacity: 0.9，它也会创建一个新的层叠上下文。这可能导致它与其它元素的堆叠顺序发生变化。

六、如何查看当前页面的层叠结构？

Chrome 开发者工具可以帮助我们分析元素是否创建了新的层叠上下文：

打开开发者工具（F12）
选中某个元素
在 "Computed" 面板中搜索 "stacking context"

你会看到类似这样的提示：

css 复制代码

Creates a stacking context.

这说明该元素已经创建了新的层叠上下文。

七、总结：掌握层叠上下文的关键点

关键点	说明
层叠上下文	控制元素在 Z 轴上的堆叠顺序
创建条件	如 `z-index`、`transform`、`opacity` 等
z-index 的局限性	只在同一个层叠上下文中生效
子级不能突破父级上下文	即使子元素 z-index 很大，也不能超过父级所在的上下文层级
层级优先级	背景 → 负 z-index → 普通元素 → 正 z-index 定位元素

八、结语

CSS 的层叠上下文看似复杂，其实本质上就是在回答一个问题：

"我到底应该显示在哪一层？"

一旦你理解了它的工作机制，就能轻松应对各种布局问题，比如弹窗遮挡、动画层级混乱等。

希望这篇文章能帮助你更清晰地认识这个重要但容易被忽视的概念。如果你觉得内容对你有帮助，欢迎点赞收藏，也可以分享给更多正在学习前端的朋友！