z-index 是 CSS 中用于控制元素堆叠顺序的属性，它决定了元素在视觉上的前后位置关系。理解 z-index 需要掌握堆叠上下文（Stacking Context）的概念，这是 z-index 工作的核心机制。
一、基本定义与生效条件
z-index 用于控制 定位元素 在垂直于屏幕方向（Z轴）上的堆叠顺序。数值越大，离用户越近。
取值：auto（默认）、整数（正数、负数、零）。
生效条件：仅对 position 值为 relative、absolute、fixed、sticky的元素有效。
示例：
.element {
position: relative;
z-index: 10;
}二、核心机制：堆叠上下文（Stacking Context）
堆叠上下文是一个独立的三维渲染环境，其内部元素的堆叠顺序不影响外部元素。理解堆叠上下文是掌握 z-index 的关键。
说明：Stacking Context也叫层叠上下文，和堆叠上下文表达的是同一个意思。
2.1 创建堆叠上下文的条件
满足以下任一条件即可创建新的堆叠上下文：
文档根元素 <html>。
position 属性值非 static，且 z-index 不为 auto。
opacity 的值小于 1，触发透明度合成。
transform、perspective、filter 或 clip-path 属性值不为 none。
设置了 isolation: isolate，创建独立的堆叠上下文。
mix-blend-mode 属性值不同于 normal，启用混合模式。
will-change 指定了上述可能影响层叠顺序的属性。
contain 属性设为 layout 或 paint，限定渲染范围。
作为 Flex 或 Grid 容器的子元素，且其 z-index 值不等于 auto。
注意：
z-index: auto 不会创建堆叠上下文。
此列表尚不完整，有待后续补充完善。
相关属性说明：
perspective 属性用于创建 3D 空间的透视效果，它定义了观察者与 z=0 平面的距离，决定了 3D 元素的“近大远小”视觉感受。当对元素应用 3D 变换（如 rotateX、rotateY、translateZ 等）时，perspective 属性会影响变换的视觉深度。
filter 属性用于对元素的视觉效果进行处理，可以对元素的内容（包括文本、图片、背景等）应用各种图形滤镜，实现模糊、亮度调整、颜色变换等效果。
isolation 属性用于控制元素是否创建新的堆叠上下文（stacking context），主要作用是隔离元素与其父元素的堆叠层级关系，避免视觉效果（如滤镜、混合模式）相互干扰。
mix-blend-mode 属性用于控制元素内容与其下方内容（父元素背景、兄弟元素等）之间的颜色混合模式，通过不同的算法将元素的像素颜色与下方图层的像素颜色进行混合，产生丰富的视觉效果。
will-change 属性用于提前告知浏览器元素的哪些属性可能会发生变化，使浏览器能够提前进行优化（如创建独立图层、启用硬件加速等），从而减少属性变化时的渲染延迟，提升动画和交互的流畅度。
contain 属性用于创建一个“包含上下文”（containing context），将元素的布局、绘制、尺寸计算等影响范围限制在其内部，避免元素内部的变化（如内容更新、样式修改）影响外部元素，从而帮助浏览器优化渲染性能（减少不必要的重排、重绘或图层重组）。
2.2 堆叠顺序
同一堆叠上下文内的默认堆叠顺序从下到上
层级顺序 | 堆叠层级描述 | 包含元素类型 |
|---|---|---|
1 | 背景和边框 | 形成堆叠上下文的根元素的背景和边框 |
2 | 负z-index值的定位元素 | z-index为负的定位元素（position: relative/absolute/fixed/sticky） |
3 | 块级盒 | 正常文档流中的块级元素（非定位的块级元素） |
4 | 浮动盒 | 设置了float属性的元素 |
5 | 内联盒 | 正常文档流中的内联元素 |
6 | z-index: 0或auto的定位元素 | 没有明确设置z-index或z-index为0的定位元素 |
7 | 正z-index值的定位元素 | z-index为正的定位元素，值越大层级越高 |
记忆口诀：背景边框 < 负z-index < 块盒 < 浮动盒 < 内联盒 < 定位auto/0 < 正z-index。
三、z-index 工作机制与关键原则
同上下文才可比：z-index 仅在同一个堆叠上下文内比较。
子不越父：子堆叠上下文中的元素无法突破父堆叠上下文的层级限制。
后来者居上：同一层级且 z-index 相同时，后出现的元素覆盖先出现的。
四、创建新堆叠上下文后的影响
当一个元素创建新的堆叠上下文（Stacking Context）后，会发生以下关键变化：
4.1子元素堆叠边界限制
新堆叠上下文内的所有子元素只能在该上下文中进行堆叠，无法超出这个上下文边界影响外部元素的堆叠顺序。
即使子元素设置了很高的 z-index 值，也无法覆盖父堆叠上下文外部的元素。
4.2 作为独立单元参与父上下文堆叠
创建新堆叠上下文的元素会作为一个整体单元，在其父堆叠上下文中按照自身的堆叠层级参与堆叠。
这个整体单元的堆叠顺序由该元素在父上下文中的 z-index 值决定。
4.3 z-index 作用域限定
元素的 z-index 值只在其所属的堆叠上下文中有效，不再是全局生效。
在不同堆叠上下文中的元素，其 z-index 值无法直接比较。
4.4 堆叠顺序计算方式改变
某些触发堆叠上下文的属性（如 opacity、transform等）可能会影响元素的渲染方式，导致硬件加速或创建新的渲染层。
为便于理解与对比创建新堆叠上下文后的影响，文中所述要点可参考《堆叠上下文（Stacking Context）演示》以获得更直观的说明。
五、常见问题与解决策略
5.1 z-index 不生效
原因
元素未设置定位（position: static）。
父元素创建了新的堆叠上下文，子元素受限于该上下文。
被更高层级的堆叠上下文覆盖。
解决
确保元素设置为定位元素。
检查祖先元素是否意外创建了堆叠上下文（如 opacity < 1、transform 等）。
调整层级结构或使用 isolation: isolate 隔离。
5.2 元素层级错乱
原因：堆叠上下文嵌套复杂或z-index值设置不当。
解决：
使用浏览器开发者工具检查堆叠上下文。
简化上下文结构，避免滥用 z-index。
建立统一的 z-index 管理系统。
六、最佳实践
最小化定位使用：仅对需要层叠控制的元素使用定位和 z-index 。
建立 z-index管理系统：使用 CSS 变量定义全局层级。
:root {
--z-dropdown: 100;
--z-modal: 200;
--z-tooltip: 300;
--z-toast: 400;
}慎用高数值：避免随意使用 9999999 等极大值。
利用 isolation: isolate 在需要隔离层级时使用，副作用最小。
优先调整 HTML 结构：利用文档流的自然堆叠顺序。
七、代码示例：子元素无法突破父级堆叠上下文
<div class="parent parent-a" style="position: relative; z-index: 1;">
<div class="child child-a" style="position: absolute; z-index: 9999;">
我是A的baby，z-index: 9999
</div>
</div>
<div class="parent parent-b" style="position: relative; z-index: 2;">
<div class="child child-b" style="position: absolute; z-index: 1;">
我是B的baby，z-index: 1
</div>
</div>parent-b 的 z-index: 2 高于 parent-a 的 z-index: 1；
因此 parent-b 及其所有子元素整体位于 parent-a 之上。
即使 child-a 的 z-index 为 9999，也无法覆盖 child-b。
总结
z-index 的有效使用建立在 堆叠上下文 这一核心机制之上。其关键要点包括：
在传统定位布局中，z-index确实只对非static定位元素有效
在传统定位布局中，z-index只对非static定位元素有效；
在flex/grid布局中，z-index可以直接应用于子元素（无需position）；
z-index的比较始终局限于同一堆叠上下文内，这是CSS堆叠机制的核心规则；
子上下文无法超越父上下文的层级限制；
多种 CSS 属性会触发创建新的堆叠上下文，需特别注意；
建议通过建立层级系统、减少不必要的堆叠上下文、合理组织 HTML 结构来管理层叠顺序。
理解堆叠上下文如同理解“部门与职级”的关系：z-index 是部门内的职级，而部门之间的上下关系由它们在总公司（根上下文）中的位置决定。掌握这一比喻，将有助于在实际开发中灵活而规范地运用 z-index。
