z-index 不生效的原因在於層疊上下文的影響。 ① z-index 僅對定位元素有效且需處於同一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 的原則包括層級分組管理、避免隨意嵌套層級、保持DOM 結(jié)構(gòu)清晰和調(diào)試時簡化結(jié)構(gòu)。理解stacking context 才能正確控制層級關(guān)係。

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

什麼是stacking context？

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

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

舉個例子：

 <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 大很多，如果它們不在同一個stacking context 裡，最終誰在上面，還得看它們各自的父級在整個頁面中的位置和層級。

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

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

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

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

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

比如下面這個常見場景：

 <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分別屬於不同父元素，並且這些父元素中有任何一個創(chuàng)建了自己的stacking context，那麼兩者的z-index就無法直接比較了。

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

怎麼排查？

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

如何正確使用z-index？

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

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

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

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

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

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

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