IE6 z-index 無效

一、概念

網頁中，層的概念與photoshop或是flash中層的概念是一致的。熟悉photoshop或是flash的應該知道，層級越高（圖層越靠上），越在上面顯示，如果層發生重疊，層級高的會覆蓋層級低的，如果非透明或半透明，則會遮擋。

在photoshop中，層的高低就是靠手動調的，滑鼠拖拽，或是ctrl+]或是ctrl+shift+[快速鍵改變層的次序。如，滑鼠拖移改變層次序的過程中：

在flash中，類似，可以手動改變圖層次序，或是使用as指令碼，例如：容器物件.setChildIndex(顯示對象,0)就是讓對象底層顯示，而容器物件.setChildIndex(顯示對象,容器物件.numChildren-1)就是最上面顯示。

在CSS中，

Z-index屬性決定了一個HTML元素的層疊層級。元素層疊層級是相對於元素在Z軸上（與X軸Y軸相對照）的位置而言。一個更高的Z-index值意味著這個元素在疊層順序中會更靠近頂部。這個層疊順序沿著垂直的線軸被呈現。

瞭解Z-index ：全透視：CSS Z-index 屬性

本文要講這個IE6下z-index不起作用的問題。

 

二、關於效果的些必要說明

以下所有結果的大背景如下：

1、頁面上固定不動的一個黑色背景，透明度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的絕對位置層之上。

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

三、IE6的抱怨：浮動讓我沉淪

首先講講第一種z-index無論設定多高都不起作用情況。

這種情況發生的條件有三個：

1、父標籤 position屬性為relative；

2、問題標籤無position屬性（不包括static）；

3、問題標籤含有浮動(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了，層級夠高吧，但是，看下面的圖：

現在去掉浮動，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下：

將外部div的position:relative屬性改為 absolute可以解決這一問題

解決方案有三，1、position:relative改為position:absolute；2、去除浮動；3、浮動元素添加position屬性（如relative，absolute等）。

四、固執的IE6：它只認第一個爸爸
用術語具體描述為：
父標籤position屬性為relative或absolute時，子標籤的absolute屬性是相對於父標籤而言的。而在IE6下，層級的表現有時候不是看子標籤的z-index多高，而要看它們的父標籤的z-index誰高誰低。

但是，相信這裡面很多人不知道IE6下，決定層級高低的不是當前的父標籤，而是整個DOM tree（節點樹）的第一個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童鞋喜笑顏開，春光燦爛：

 

五、必要的結語
z-index這玩意深不可測，裡面所蘊含的知識不是 CSS手冊上的那點東西，那隻是冰山一角。這涉及到border及background的堆疊模型，涉及到同層級的顯示問題，以及瀏覽器顯示的些機制等， 這是很深的一潭水。