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. 舉個例子
<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 不能跨越父容器。
- 想讓元素真正覆蓋其他內容，要確保它所在的上下文本身層級更高。
)
