z-index 無效解決方法

在工作中遇到這樣一個問題：設置一個DIV z-index 很大，但是仍然被其他元素遮擋

例如：左側的若干圖標 z-index 依次增加，右側的四個圖標也需要設置 z-index。

如果界面中同一個位置有多個元素層疊，可以設置 z-index 設置不同元素的層級。

有時候遇到設置 z-index 後無效的原因，下面簡單分析：

父級元素溢出隱藏或者不顯示

如果父元素設置了 overflow:hidden /display:none/ 等，那麼子元素如果在父元素外部絕對定位，那麼調節子元素 z-index 可能不會顯示。

.father {
  display: none;
  opacity: 0;
  overflow: hidden; (auto)
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
}

解決方案：取消父元素的上述屬性。

父級元素層級低

<div style="z-index: 1">
  <div style="z-index: 10">son</div>
</div>
<div style="z-index: 2"></div>

例如上面的情況，第一個父級DIV的層級是1，第二個父級DIV的層級是2，第一個父級內部的子級DIV是10。由於父級的差距，所以內部子級 z-index設置很大，不會提升到第二個父級上層，就造成了 z-index 無效的假象。

解決方法：查看父元素的 z-index 並修改

沒有設置定位

使用 z-index 的前提是，需要設置 div 的 定位（eg: position: absolute;）如果元素是標準流，沒有定位，那麼設置z-index不會使當前元素在另一個元素上方。

<div style="position:'absolute'; z-index: 10"></div>

解決方法：設置當前元素和父級元素的定位

IE 瀏覽器不兼容

z-index 有一個屬性 inherit，表示子元素繼承父元素的 z-index。這個參數在 IE 瀏覽器上不兼容。

目前沒有很好的直接解決方案，可以使用其他的 CSS 代替 z-index（float等）。

Note

如果項目中層級很複雜（界面 1, modal 100, dialog 1000, mask 500），爲了避免層級混亂，最好把 z-index 維護在一個公共的組件內部（一個單獨的CSS文件或者單獨的JS文件中，使用行內樣式），這樣修改和後期維護比較方便。