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

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

解決辦法： 

父級元素加上position:relative;並設置z-index屬性。父級元素的z-index優先，其中包含的元素的z-index是相對於父級元素的index。

1. <div style="position:relative;z-index:2;">
2. <p style="position:absolute;z-index:99;"> ...(要在上層顯示的內容）</p>
3. <div>
4. <div style="position:relative;z-index:1;">
5. ...
6. <div>

上面的例子中，倘若將第一個div的z-index設置爲-1，則無論p的z-index爲多少，多會被下面的div遮住。 相反，倘若下層div的z-index也設置成2，ie7正在解釋時，會按照"position:relative"的層的順序，自動疊加，即實際值是3。沒有加position屬性時，所有值繼承自父級。

在ie7下，如下代碼會出現z-index覆蓋混亂的問題：

1. <div style="position:relative;">
2. <div style="position:absolute;z-index:100;width:100px;height:100px;background:red;">
3. ……
4. </div>
5. </div>
6. <div style="position:relative;">
7. <div style="position:absolute;z-index:10;width:20px;height:20px;background:black;">
8. ……
9. </div>
10. </div>

ie7下顯示爲：

黑色到了紅色的上面。

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

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

1. <div style="position:relative;z-index:2;">
2. <div style="position:absolute;z-index:100;width:100px;height:100px;background:red;">
3. ……
4. </div>
5. </div>
6. <div style="position:relative;z-index:1;">
7. <div style="position:absolute;z-index:10;width:20px;height:20px;background:black;">
8. ……
9. </div>
10. </div>

這樣就可以正常顯示了：