【CSS】层叠上下文和z-index

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 < 1
  • transform
  • filter
  • perspective
  • clip-path
  • will-change
  • isolation: isolate

---

🔹 3. 作用范围

1. 同一层叠上下文内：

   • z-index 决定了元素堆叠顺序。

2. 跨层叠上下文时：

   • 不同上下文之间的元素，比较的是上下文容器的层级，而不是容器内部子元素的 z-index。
   • 即：一个子元素 z-index: 9999，也不能盖过外层上下文里 z-index: 10 的兄弟元素。

---

🔹 4. 举个例子

<div class="a">
  <div class="b">
    <div class="c">c</div>
  </div>
  <div class="d">d</div>
</div>

.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 不能跨越父容器。
• 想让元素真正覆盖其他内容，要确保它所在的上下文本身层级更高。