在寫項目當中,發現設置了div元素 A 被 position: absolute 的 div 元素 B 覆蓋住了。而給這個被遮住的元素 A 設置 z-index 竟然沒有生效。通過查找發現,要讓z-index起作用的前提,就是元素的position屬性要是relative,absolute或是fixed。
情況一、非IE6瀏覽器
1.1 可能原因
- 父標籤的屬性爲 relative
- 出問題的標籤沒有設置 position 屬性
- 出問題的標籤含有 float 屬性
1.2 解決方式:
- 將父標籤的屬性從 relative 改爲 absolute
- 給標籤增加 position 屬性
- 去除浮動
情況二、IE6 瀏覽器
2.1 原因
IE6下,層級的表現有時候不是看子標籤的z-index多高,而要看整個DOM tree(節點樹)的第一個relative屬性的父標籤的層級
2.2 解決方式
在第一個relative屬性加上一個更高的層級(z-index:1)