IE6下z-index犯癲不起做用bug的初步研究[轉]

by zhangxinxu from http://www.zhangxinxu.com

1、匆匆帶過的概念

關於CSS中層級z-index的定義啊什麼的不是本文的重點，不會花費過多篇幅詳細講述。這裏就簡單帶過，z-index伴隨着層的概念產生的。網頁 中，層的概念與photoshop或是flash中層的概念是一致的。熟悉photoshop或是flash的應該知道，層級越高（圖層越靠上），越在上 面顯示，若是層發生重疊，層級高的會覆蓋層級低的，若是非透明或半透明，則會遮擋。

在photoshop中，層的高低就是靠手動調的，鼠標拖拽，或是ctrl+]或是ctrl+shift+[快捷鍵改變層的次序。以下圖，鼠標拖移改變層次序的過程當中：

在flash中，相似，能夠手動改變圖層次序，或是使用as腳本，例如：容器對象.setChildIndex(顯示對象,0)就是讓對象底層顯示，而容器對象.setChildIndex(顯示對象,容器對象.numChildren-1)就是最上面顯示。

在CSS中，顯然，只能經過代碼改變層級，這個屬性就是z-index，要讓z-index起做用有個小小前提，就是元素的position屬性要 是relative，absolute或是fixed。就像生孩子同樣，一我的不頂用，須要配合。下爲z-index的業餘示意圖：

按照正常的思惟，z-index層級越高，內容越應該在上面顯示。在大部分的瀏覽器在大部分的狀況下，確實如此，可是不絕對。尤爲遇到IE6，這家 夥，估計是後媽帶大的，從小養分不良，結果後來健康問題一堆又一堆。z-index的問題就是其中之一，而本文就是要講講這個IE6下z-index不起 做用的問題。

2、關於效果截圖的些必要說明
下面的不是廢話，是爲了更容易的理解我下面唾沫橫飛的內容。

如下全部結果截圖的大背景以下：
一、頁面上固定不動的，一成不變的，送豪宅也不會從良的是一個黑色背景，透明度40%，幾乎滿屏顯示的層級爲1的絕對定位層。HTML爲：<div id="blank"></div>，對應CSS爲：#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}

做用是爲了讓層級關係一目瞭然。看：

這說明內容在z-index爲1的絕對定位層之下。

這說明內容在z-index爲1的絕對定位層之上。

二、頁面上作對比的是美女圖片，圖片在半透明黑色絕對定位層的上面仍是下面很容易辨別，這樣，您就可以對我所說的z-index不起做用有很直觀的認識了。

3、IE6的抱怨：浮動讓我沉淪
如今開始真正的講述問題的產生，緣由以及解決了。首先講講第一種z-index不管設置多高都不起做用狀況。這種狀況發生的條件有三個：一、父標籤 position屬性爲relative；二、問題標籤無position屬性（不包括static）；三、問題標籤含有浮動(float)屬性。
您能夠拿下面的代碼本身作個簡單測試：

<div id="blank"></div>
<div style="position:relative; z-index:9999;">
	<img style="float:left;" src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>

丫的，這z-index都9999了，層級夠高吧，可是，看下面的圖：

這一對比就知道問題了，可能有人會疑問，這會不會是IE6的relative本身感冒了，而不是浮動(float)攜帶了「甲流病毒」。好，我如今去掉浮動，HTML代碼以下：

<div id="blank"></div>
<div style="position:relative; z-index:9999;">
	<img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>

結果IE6下：

您能夠狠狠地點擊這裏：在線demo測試

我想，問題應該都清楚了，至於緣由，我起初覺得是haslayout搞的鬼，後來，用zoom一測試，發現不是（IE7下無此bug也證實不是 haslayout的緣由），彷佛就是這個float會讓z-index失效。因爲將外部div的position:relative屬性改成 absolute能夠解決這一問題，我就懷疑是否是浮動讓relative發生了些變化，float與relative在水平定位上能夠說是近親，會不會 是由於這二者攪和在一塊兒因此什麼「畸形」「體弱多病」就出現了。這僅是個人猜想而已，真正的緣由仍是去問IE6的後媽吧。

解決方法，解決方法有三，一、position:relative改成position:absolute；二、去除浮動；三、浮動元素添加position屬性（如relative，absolute等）。

4、執拗的IE6：它只認第一個爸爸
可能很多人知道，這IE6下，層級的高低不只要看本身，還要看本身的老爸這個後臺是否夠硬。用術語具體描述爲：
父標籤position屬性爲relative或absolute時，子標籤的absolute屬性是相對於父標籤而言的。而在IE6下，層級的表現有時候不是看子標籤的z-index多高，而要看它們的父標籤的z-index誰高誰低。

有必定經驗的人可能都知道上面的事實。可是，相信這裏面不少人不知道IE6下，決定層級高低的不是當前的父標籤，而是整個DOM tree（節點樹）的第一個relative屬性的父標籤。有時平時咱們多處理一個父標籤，z-index層級多而複雜的狀況很少見，因此不免會有認識上 的小小誤差。

好，下面展現這個bug。

條件很簡單，只要絕對定位的第一個元素的第一個爸爸，或者說是最老的那個爸爸級別的人的relative屬性小於黑色半透明層的z-index層級。例以下面的HTML代碼：

<div id="blank"></div>
<div style="position:relative;">
	<div style="position:relative; z-index:1000;">
        <div style="position:absolute; z-index:9999;">
        	<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
        </div>
    </div>
</div>

能夠看到，mm3圖片的父標籤div 是絕對定位，層級9999，比1大多了，絕對定位的父標籤層級1000(10000也同樣)，也比黑色半透明層的z-index:1大多了，可是，咱們可憐的IE6童鞋——

再看看以Firefox爲表明的其餘童鞋：

IE7與IE6有着一樣的bug，緣由很簡單，雖然圖片所在div當前的老爸層級很高(1000)，可是因爲老爸的老爸不頂用，可憐了9999如此強勢的孩子沒有出頭之日啊！

知道緣由解決就很輕鬆了，給第一任老爸添加z-index後的HTML代碼以下：

<div id="blank"></div>
<div style="position:relative; z-index:1;">
	<div style="position:relative; z-index:1000;">
        <div style="position:absolute; z-index:9999;">
        	<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
        </div>
    </div>
</div>

結果IE6童鞋喜笑顏開，春光燦爛：

您能夠狠狠地點擊這裏：改變父標籤層級在線demo測試

5、必要的結語
老實講，我對z-index研究的精力其實比較有限，本文的兩個bug研究都屬於停留在表層的。z-index這玩意深不可測，裏面所蘊含的知識不是 CSS手冊上的那點東西，那只是冰山一角。這涉及到border及background的堆疊模型，涉及到同層級的顯示問題，以及瀏覽器顯示的些機制等， 這是很深的一潭水。

總之，慢慢來，慢慢積累，慢慢研究，必定會一步一步揭開z-index的本質面紗的。

來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]