z-index 不生效的主因是未滿足定位條件或層疊上下文限制。要使 z-index 生效，元素必須設置 position 為 relative、absolute、fixed 或 sticky；其次，若子元素所在父容器層級較低，其 z-index 再高也會被壓制，需調整父級層級關系；常見問題還包括忘記設定位屬性、使用負值或受瀏覽器默認樣式干擾，排查時應依次檢查定位狀態、父級影響及使用開發者工具分析結構。掌握這些規則可有效控制元素層級。
網頁布局中，元素層級的控制很關鍵，尤其是當多個元素重疊時。想讓某個元素顯示在最上層或者被壓在下面，z-index 是最常用的手段。不過很多人用的時候會遇到 z-index 不生效的問題，其實關鍵在于理解它的使用條件和層疊規則。
一、z-index 的基本用法
z-index 只對定位元素有效，也就是說，必須給元素設置 position 屬性為 relative、absolute、fixed 或 sticky，否則 z-index 是不會起作用的。
舉個例子：
立即學習“前端免費學習筆記（深入）”；
.box { position: absolute; z-index: 10; }
這樣就能確保這個 box 在同級元素中盡可能靠前顯示。數值越大，層級越高。但注意，它只在同一“層疊上下文”里比較才有效。
二、層疊上下文的影響
z-index 看起來簡單，但真正復雜的是層疊上下文（stacking context）。如果兩個元素分別屬于不同的父容器，而其中一個父容器本身層級較低，那么即使子元素 z-index 很高，也可能被整體壓住。
比如：
<div class="parent1"> <div class="child" style="z-index: 1000">我是子元素</div> </div> <div class="parent2"></div>
如果 parent1 沒有定位，或者它的 z-index 比 parent2 小，那 child 再怎么設 z-index 也很難浮出來。這時候需要調整 parent 的層級關系，而不是只看子元素。
三、常見問題與解決方法
最常見的問題是設置了 z-index 卻沒效果。這往往是因為：
- 忘記加 position 屬性；
- 元素被包裹在另一個層疊上下文中；
- 使用了負值導致被隱藏；
- 瀏覽器默認樣式干擾。
建議排查順序是：先確認是否定位了，再檢查父級是否有影響，最后用瀏覽器開發者工具查看層級結構。有時候一個簡單的 z-index: 9999 能快速解決問題，但不要濫用，避免后續維護困難。
基本上就這些。掌握好 z-index 和層疊上下文的關系，布局時就能更自如地控制元素顯示優先級。
