z-index 的作用范围受"层叠上下文（stacking context）"影响。
🔹 1. z-index 的基本作用
- 控制元素在 同一个层叠上下文（stacking context） 内的堆叠顺序。
- 值越大，显示层级越靠上。
🔹 2. 什么是层叠上下文（stacking context）
层叠上下文是浏览器渲染时的一个独立空间，z-index 只在同一层叠上下文里比较 。
一个元素可能会创建新的层叠上下文，比如：
-
根层叠上下文 ：HTML 文档的
<html>元素天然就是一个。 -
设置了定位 + z-index 的元素：
position: relative/absolute/fixed/sticky且z-index值不是auto。
-
其他能触发层叠上下文的属性（即使没设置 z-index）：
opacity < 1transformfilterperspectiveclip-pathwill-changeisolation: isolate
🔹 3. 作用范围
-
同一层叠上下文内：
z-index决定了元素堆叠顺序。
-
跨层叠上下文时：
- 不同上下文之间的元素，比较的是上下文容器的层级，而不是容器内部子元素的 z-index。
- 即：一个子元素
z-index: 9999，也不能盖过外层上下文里z-index: 10的兄弟元素。
🔹 4. 举个例子
html
<div class="a">
<div class="b">
<div class="c">c</div>
</div>
<div class="d">d</div>
</div>
css
.a {
position: relative;
z-index: 1; /* 父容器 A 层级低 */
}
.b {
position: relative;
z-index: 9999; /* B 再高也只是 a 内部 */
}
.c {
position: relative;
z-index: 99999; /* 在 b 内部最高 */
}
.d {
position: relative;
z-index: 2; /* D > A(1)，所以 D 在最上面 */
}👉 结果：
.d会压在.c上面，尽管.c的 z-index 数字更大。- 因为
.c属于.a这个上下文，而.a的 z-index = 1，整体比.d（z-index=2）低。
🔹 5. 总结
z-index只在同一层叠上下文内生效。- 新的层叠上下文会"隔离"子元素，子元素的 z-index 不能跨越父容器。
- 想让元素真正覆盖其他内容，要确保它所在的上下文本身层级更高。