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

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

點評:絕對定位元素的「有定位屬性(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:

**如下:

這樣就可以正常顯示了:

ie7下z index的問題

以前也遇到過在ie7下z index的層級提不上來的問題,總結了之前的經驗先在這裡做個記錄,新手可以看看 老鳥可以笑笑。有2個absolute定位的層,要求第乙個層覆蓋第二個層,第乙個層設定z index即使為10000,第二層不設定z index或者設定為1,在ie6 ie7瀏覽器下第乙個層還是被...

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

絕對定位元素的 有定位屬性 relative或absolute 的父元素 在渲染層次時起到了主要作用,前面的被後面的覆蓋了。解決辦法就是給有定位屬性的父元素設定z index 解決辦法 父級元素加上position relative 並設定z index.父級元素的z index優先,其中包含的元素...

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

點評 絕對定位元素的 有定位屬性 relative或absolute 的父元素 在渲染層次時起到了主要作用,前面的被後面的覆蓋了。解決辦法就是給有定位屬性的父元素設定z index 解決辦法 父級元素加上position relative 並設定z index.父級元素的z index優先,其中包含...