【前端】CSS 設置 z-index 不生效的問題

在寫項目當中,發現設置了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)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章