原文鏈接：http://blog.csdn.net/james521314/article/details/8555080
IE6、7都存在着z-index失效的bug，萬惡的IE，對於每一個美工來說，IE都不怎麼招人待見。但是又無法不照顧到它，畢竟它還佔有強大的市場份額。我們不能期望它做出什麼改變，我們就要學會找到方法去迎合它。
Z-index是讓元素漂浮起來的一個屬性，在IE6、7中無論你把Z-INDEX的級別設置的有多高，它就是不漂浮起來。在CSS中，要讓z-index起作用有個小小前提，就是元素的position屬性要是relative，absolute或是fixed。
1.第一種情況（z-index無論設置多高都不起作用情況）：這種情況發生的條件有三個：
1、父標籤 position屬性爲relative；
2、問題標籤無position屬性（不包括static）；
3、問題標籤含有浮動(float)屬性。
eg:z-index層級不起作用，浮動會讓z-index失效
<div style="position:relative; z-index:9999;">
<img style="float:left;" src="http://www.jacoobs.com/image/logo.jpg" />
</div>
解決辦法有三個（任一即可）：
1、position:relative改爲position:absolute；
2、浮動元素添加position屬性（如relative，absolute等）；
3、去除浮動。
2.第二種情況
IE6下，層級的表現有時候不是看子標籤的z-index多高，而要看整個DOM tree（節點樹）的第一個relative屬性的父標籤的層級。
eg:IE7與IE6有着同樣的bug，原因很簡單，雖然圖片所在div當前的老爸層級很高(1000)，但是由於老爸的老爸不頂用，可憐了9999如此強勢的孩子沒有出頭之日啊！
<div style="position:relative;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://www.jacoobs.com/image/logo.jpg" />
</div>
</div>
</div>
解決辦法： 在第一個relative屬性加上一個更高的層級（z-index:1）
<div style="position:relative; z-index:1;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://www.jacoobs.com/image/logo.jpg" />
</div>
</div>
</div>
z-index這玩意深不可測，裏面所蘊含的知識不是 CSS手冊上的那點東西，那只是冰山一角。這涉及到border及background的堆疊模型，涉及到同層級的顯示問題，以及瀏覽器顯示的些機制等， 這是很深的一潭水。
原文鏈接：http://blog.csdn.net/james521314/article/details/8555080
頂
1
踩