相信大家都遇到过这样的情况：明明给元素设置了很大的 z-index 值（比如 9999），但就是不能让它显示在最上层。今天，我就带大家彻底理解 z-index 的工作原理。
常见误区
很多同学对 z-index 的理解仅限于：
"z-index 值越大，元素就越靠前" "要让元素显示在最上层，就把 z-index 设得特别大"
这种理解是片面的。实际上，z-index 的工作方式要复杂得多。
基础知识
在深入讲解之前，我们先明确几个基本点：
- z-index 只对定位元素生效（position 为 relative、absolute、fixed 或 sticky）
- z-index 的默认值是 auto，可以是负数
- 数值确实影响层叠级别，但前提是：元素处于同一个层叠上下文中
核心概念：层叠上下文
这里要引入一个关键概念：层叠上下文（Stacking Context）。
想象一下，如果说普通的 CSS 布局是在一个平面上排列元素，那么层叠上下文就像是在这个平面上叠加了多个透明的玻璃板，每个玻璃板都是一个独立的层叠世界。
想象你在整理一摞文件，每个文件夹代表一个层叠上下文：
- 文件夹 A 里的文件 1 比文件 2 要靠上（z-index 更大）
- 文件夹 B 里的文件 3 比文件 4 要靠上
- 但是！文件夹 A 和文件夹 B 的排序是由文件夹的顺序决定的
- 文件夹 B 在上面时，即使文件夹 A 里的文件 1 的 z-index 值比文件夹 B 里的所有文件都大，它也永远在下面
实战案例
来看一个实际的例子：
<div class="parent1">
<div class="child1" style="z-index: 1000">我明明很大</div>
</div>
<div class="parent2">
<div class="child2" style="z-index: 1">我却在上层</div>
</div>
<style>
.parent1 {
position: relative;
z-index: 1;
}
.parent2 {
position: relative;
z-index: 2;
}
.child1 {
position: absolute;
width: 100px;
height: 100px;
background-color: yellowgreen;
}
.child2 {
position: absolute;
width: 50px;
height: 50px;
margin-top: 50px;
background-color: aqua;
}
</style>
为什么 z-index: 1000 的元素反而在下面？
答案就在于这两个子元素分别位于不同的层叠上下文中。它们的显示顺序取决于父元素的 z-index 值，而不是自己的。
创建新的层叠上下文
这里有个特别要注意的点：很多 CSS 属性会创建新的层叠上下文，比如：
- 设置了 position: relative/absolute 且 z-index 不为 auto 的元素
- opacity 小于 1 的元素
- transform 不为 none 的元素
- filter 不为 none 的元素
这就是为什么有时候我们明明没有设置 position 和 z-index，元素的层叠关系也会出现"异常"。
总结
理解了层叠上下文这个概念，z-index 的工作原理就清晰多了：
- 先确定元素是否处于同一个层叠上下文
- 如果是，直接比较 z-index 值
- 如果不是，先比较父级层叠上下文的顺序
记住：z-index 不是决定元素层叠顺序的唯一因素，层叠上下文才是关键。
