z-index在css中不起作用的主要原因有三點：首先，元素必須設置非Static的position屬性（如relative、absolute、fixed或sticky），否則z-index無效；其次，不同定位方式的元素處于不同的層疊上下文中，例如fixed和sticky元素層級獨立于relative與absolute；最后，z-index的作用范圍僅限于同一父級內的兄弟元素之間，嵌套結構中的高z-index子元素無法超越低層級父元素之外的其他父級。因此，使用時應確保正確設置定位，并合理規劃層級結構以避免混亂。
z-index在css中常讓人摸不著頭腦，尤其當你以為它能直接控制層疊順序的時候，結果卻發現有時候完全不起作用。其實，z-index并不是萬能的層級開關，它的表現跟元素的定位方式密切相關。
z-index只對定位元素生效
首先必須明確一點：z-index只有在設置了position屬性（非static）的元素上才起作用。如果你給一個沒有定位的div設置z-index:999，它是不會有任何層級變化的。
比如：
立即學習“前端免費學習筆記（深入）”；
.box { z-index: 999; }
如果這個.box沒設置position: relative、absolute、fixed或sticky，那這個z-index就相當于沒寫。
所以，使用z-index前，先檢查一下目標元素有沒有正確地定位。
不同定位方式下的z-index表現差異
不同定位方式的元素雖然都能用z-index控制層級，但它們所處的“戰場”并不一樣。
- relative和absolute：兩者都在普通文檔流中占有一席之地（absolute脫離文檔流），但它們的z-index是在同一個層級體系里比較的。
- fixed和sticky：fixed是相對于視口定位，sticky則是介于relative和fixed之間的一種狀態。它們的層級是獨立的，也就是說，即使你給一個absolute元素設置很高的z-index，也可能會被fixed元素蓋住，因為它們不在一個層疊上下文中。
舉個例子：
你有一個position: fixed的導航欄，還有一個position: absolute的彈窗。如果你沒給導航欄設z-index，而彈窗設置了z-index: 1000，那導航欄仍然可能蓋住彈窗，因為它默認的層疊層級更高。
層疊上下文影響z-index效果
z-index不是全局唯一的，而是受層疊上下文（stacking context）的影響。每個具有定位屬性并設置了z-index的元素，都會創建一個新的層疊上下文。在這個上下文中，z-index值只能與同一父級中的兄弟元素進行比較。
比如：
立即學習“前端免費學習筆記（深入）”；
- 父A設置了z-index: 100；
- 子A1設置了z-index: 999；
- 父B設置了z-index: 50；
- 子B1設置了z-index: 1000；
在這種情況下，父A整體都比父B層級高，所以子A1即使z-index比子B1小，也會顯示在子B1之上。
這說明了一個問題：z-index并不是數字越大越靠前，而是要看它所屬的上下文層級。
這也解釋了為什么有時候你明明寫了z-index: 9999，但還是被別的元素蓋住了——因為你在錯誤的“戰場”上打了勝仗。
使用建議與常見避坑方法
為了更有效地使用z-index，避免出現“層級混亂”的情況，可以參考以下幾個做法：
- ? 給使用z-index的元素都加上position: relative，哪怕top/left為0也沒關系，這樣確保z-index生效。
- ? 避免隨意亂用超大z-index值（如999999），保持層級結構清晰。
- ? 將需要頻繁控制層級的組件放在同一個父容器下，這樣它們的z-index才有可比性。
- ? 對于fixed定位的元素，單獨管理其層級，不要和absolute混在一起比較。
- ? 使用chrome DevTools的Computed面板查看元素實際的層疊順序，幫助調試。
基本上就這些。z-index看起來簡單，但要真正用明白，還得理解它背后的層疊機制和定位邏輯。
