z-index 不生效的原因在于層疊上下文的影響。① z-index 僅對(duì)定位元素有效且需處于同一 stacking context 中；② stacking context 是由父元素創(chuàng)建的獨(dú)立空間，子元素的層疊順序只在該空間內(nèi)生效；③ 創(chuàng)建新 stacking context 的方式包括使用 transform、opacity、filter 等屬性；④ 常見問題是不同 stacking context 中的 z-index 無法直接比較，需檢查共同祖先是否創(chuàng)建了 stacking context；⑤ 排查方法是通過開發(fā)者工具查看父元素樣式；⑥ 正確使用 z-index 的原則包括層級(jí)分組管理、避免隨意嵌套層級(jí)、保持 DOM 結(jié)構(gòu)清晰和調(diào)試時(shí)簡(jiǎn)化結(jié)構(gòu)。理解 stacking context 才能正確控制層級(jí)關(guān)系。

z-index 看似簡(jiǎn)單，但經(jīng)常讓人頭疼。它不是獨(dú)立工作的，而是依賴于整個(gè)層疊上下文（stacking context）的結(jié)構(gòu)。如果你發(fā)現(xiàn)某個(gè)元素該顯示在最上層卻總是被壓住，問題很可能出在整個(gè)層級(jí)關(guān)系上，而不是 z-index 本身寫錯(cuò)了。

什么是 stacking context？

z-index 只對(duì)定位元素（比如設(shè)置了 position: relative, absolute, fixed, 或 sticky）有效。但它真正起作用的前提是：這些元素必須處在同一個(gè)層疊上下文中。

一個(gè) stacking context 是由某個(gè)父元素創(chuàng)建出來的“獨(dú)立空間”，里面的子元素之間的層疊順序只在這個(gè)空間內(nèi)生效。一旦你跨越了這個(gè)空間去比較層疊順序，那就不作數(shù)了。

舉個(gè)例子：

<div class="parent1">
  <div class="child" style="z-index: 1000;">Child A</div>
</div>

<div class="parent2">
  <div class="child" style="z-index: 1;">Child B</div>
</div>

即使 A 的 z-index 比 B 大很多，如果它們不在同一個(gè) stacking context 里，最終誰在上面，還得看它們各自的父級(jí)在整個(gè)頁(yè)面中的位置和層級(jí)。

哪些操作會(huì)創(chuàng)建新的 stacking context？

• 使用 z-index 配合定位屬性
• 使用 opacity 小于 1
• 使用 transform
• 使用 filter
• 使用 will-change
• 使用 isolation: isolate
• 使用 mix-blend-mode
• 使用 perspective 或 clip-path

這些都會(huì)悄悄地創(chuàng)建一個(gè)新的 stacking context，從而影響你原本想控制的層級(jí)。

常見問題：為什么 z-index 不生效？

這個(gè)問題出現(xiàn)最多的情況是——你在不同的 stacking context 中比較 z-index。

比如下面這個(gè)常見場(chǎng)景：

<div class="modal" style="z-index: 100;">
  <div class="content">我是彈窗內(nèi)容</div>
</div>

<div class="sidebar" style="z-index: 99;">
  <div class="menu">菜單欄</div>
</div>

看起來 modal 的 z-index 更大，應(yīng)該蓋住 sidebar。但如果 .modal 和 .sidebar 分別屬于不同父元素，并且這些父元素中有任何一個(gè)創(chuàng)建了自己的 stacking context，那么兩者的 z-index 就無法直接比較了。

這時(shí)候你就得往上找，看看它們各自最近的共同祖先是誰，那個(gè)祖先是否也創(chuàng)建了一個(gè) stacking context。有時(shí)候你會(huì)發(fā)現(xiàn)，問題根本不在當(dāng)前元素身上，而是在它的“祖宗”那里。

怎么排查？

1. 打開瀏覽器開發(fā)者工具，選中相關(guān)元素，查看它們的樣式。
2. 檢查每個(gè)父元素是否設(shè)置了 transform、opacity、filter 等可能創(chuàng)建 stacking context 的屬性。
3. 如果有多個(gè) stacking context 層級(jí)嵌套，那就需要統(tǒng)一調(diào)整它們的 z-index，或者重新組織 DOM 結(jié)構(gòu)。

如何正確使用 z-index？

要讓 z-index 按你的預(yù)期工作，建議遵循幾個(gè)簡(jiǎn)單的原則：

• 層級(jí)分組管理：給不同的功能模塊設(shè)置固定的 z-index 范圍，比如導(dǎo)航欄用 100~199，彈窗用 200~299，遮罩用 300~399。這樣不容易沖突。

• 避免隨意嵌套層級(jí)：不要在每一個(gè)組件里都隨便加 z-index，否則很容易造成混亂。盡量讓層級(jí)控制集中在頂層布局或公共組件中處理。

• 保持 DOM 結(jié)構(gòu)清晰：把需要疊加在一起的元素放在同一個(gè)容器里，這樣它們就在同一個(gè) stacking context 下，更容易控制層級(jí)。

• 調(diào)試時(shí)簡(jiǎn)化結(jié)構(gòu)：當(dāng)你遇到層級(jí)錯(cuò)亂的問題時(shí)，可以臨時(shí)移除部分無關(guān)元素，或者用背景色高亮各個(gè)區(qū)域，幫助你更直觀地看出它們的層級(jí)關(guān)系。

基本上就這些。理解 z-index 的關(guān)鍵是搞清楚它所處的 stacking context。只要不跳進(jìn)“哪個(gè)值更大”的誤區(qū)，而是從結(jié)構(gòu)層面去分析，大部分問題都能解決。

以上是故障排除CSS` z index`堆疊上下文的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！