日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

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

云知道

【詳細分析 ie7下z-index失效問題解決方法】解決辦法：

父級元素加上position:relative;并設置z-index.
父級元素的z-index優(yōu)先，其中包含的元素的z-index是相對于父級元素的index.
div style=position:relative;z-index=2
p style=position:absolute;z-index=99 ...(要在上層顯示的內(nèi)容）/p
div
div style=position:relative;z-index=1
...
div

上面的例子中，倘若將第一個div的z-index設置為-1，則無論p的z-index為多少，多會被下面的div遮住 。
相反，倘若下層div的z-index也設置成2，ie7正在解釋時，會按照position:relative的層的順序，自動疊加，即實際值是3.
沒有加position屬性時，所有值繼承自父級 。
在ie7下，如下代碼會出現(xiàn)z-index覆蓋混亂的問題：


復制代碼代碼如下:
div style="position:relative;"
div style="position:absolute;z-index:100;width:100px;height:100px;background:red;"/div
/div
div style="position:relative;"
div style="position:absolute;z-index:10;width:20px;height:20px;background:black;"/div
/div


ie7下顯示為：

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


黑色到了紅色的上面 。
這是因為絕對定位元素的有定位屬性（relative或absolute）的父元素在渲染層次時起到了主要作用，前面的被后面的覆蓋了 。
解決辦法就是給有定位屬性的父元素設置z-index：


復制代碼代碼如下:
div style="position:relative;z-index:2;"
div style="position:absolute;z-index:100;width:100px;height:100px;background:red;"/div
/div
div style="position:relative;z-index:1;"
div style="position:absolute;z-index:10;width:20px;height:20px;background:black;"/div
/div


這樣就可以正常顯示了：
詳細分析 ie7下z-index失效問題解決方法


    推薦閱讀