ie7下z index失效問題解決方法 詳細分析

2022-08-05 16:09:13 字數 755 閱讀 2693

點評:絕對定位元素的“有定位屬性(relative或absolute)的父元素”在渲染層次時起到了主要作用,前面的被後面的覆蓋了。解決辦法就是給有定位屬性的父元素設定z-index

解決辦法:

父級元素加上position:relative;並設定z-index. 

父級元素的z-index優先,其中包含的元素的z-index是相對於父級元素的index. 

...(要在上層顯示的內容)

... 

上面的例子中,倘若將第一個div的z-index設定為-1,則無論p的z-index為多少,多會被下面的div遮住。 

相反,倘若下層div的z-index也設定成2,ie7正在解釋時,會按照"position:relative"的層的順序,自動疊加,即實際值是3. 

沒有加position屬性時,所有值繼承自父級。

在ie7下,如下**會出現z-index覆蓋混亂的問題:

**如下:

ie7下顯示為:

黑色到了紅色的上面。

這是因為絕對定位元素的“有定位屬性(relative或absolute)的父元素”在渲染層次時起到了主要作用,前面的被後面的覆蓋了。

解決辦法就是給有定位屬性的父元素設定z-index:

**如下:

這樣就可以正常顯示了: