這是一個在鑫空間里轉過來一篇文章，作者寫的很詳細，很給力，不感獨享。

一、匆匆?guī)н^的概念
關于CSS中層級z-index的定義啊什么的不是本文的重點，不會花費過多篇幅詳細講述。這里就簡單帶過，z-index伴隨著層的概念產生的。網頁中，層的概念與photoshop或是flash中層的概念是一致的。熟悉photoshop或是flash的應該知道，層級越高（圖層越靠上），越在上面顯示，如果層發(fā)生重疊，層級高的會覆蓋層級低的，如果非透明或半透明，則會遮擋。

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

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

在CSS中，顯然，只能通過代碼改變層級，這個屬性就是z-index，要讓z-index起作用有個小小前提，就是元素的position屬性要是relative，absolute或是fixed。就像生孩子一樣，一個人不頂用，需要配合。下為z-index的業(yè)余示意圖：

按照正常的思維，z-index層級越高，內容越應該在上面顯示。在大部分的瀏覽器在大部分的情況下，確實如此，但是不絕對。尤其遇到IE6，這家伙，估計是后媽帶大的，從小營養(yǎng)不良，結果后來健康問題一堆又一堆。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;}

作用是為了讓層級關系一目了然?？矗?br />
這說明內容在z-index為1的絕對定位層之下。

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

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

三、IE6的抱怨：浮動讓我沉淪
現(xiàn)在開始真正的講述問題的產生，原因以及解決了。首先講講第一種z-index無論設置多高都不起作用情況。這種情況發(fā)生的條件有三個：1、父標簽position屬性為relative；2、問題標簽無position屬性（不包括static）；3、問題標簽含有浮動(float)屬性。
您可以拿下面的代碼自己做個簡單測試：

<div id=”blank”></div>
<div style=”position:relative; z-index:9999;”>
<img style=”float:left;” src=”/files/2010/12/bbs/mm2.jpg” />
</div>
丫的，這z-index都9999了，層級夠高吧，但是，看下面的圖：

這一對比就知道問題了，可能有人會疑問，這會不會是IE6的relative自己感冒了，而不是浮動(float)攜帶了“甲流病毒”。好，我現(xiàn)在去掉浮動，HTML代碼如下：
<div id=”blank”></div>
<div style=”position:relative; z-index:9999;”>
<img src=”/files/2010/12/bbs/mm2.jpg” />
</div>
結果IE6下：

您可以狠狠地點擊這里：在線demo測試

我想，問題應該都清楚了，至于原因，我起初以為是haslayout搞的鬼，后來，用zoom一測試，發(fā)現(xiàn)不是（IE7下無此bug也證明不是haslayout的原因），似乎就是這個float會讓z-index失效。由于將外部div的position:relative屬性改為absolute可以解決這一問題，我就懷疑是不是浮動讓relative發(fā)生了些變化，float與relative在水平定位上可以說是近親，會不會是因為這兩者攪和在一起所以什么“畸形”“體弱多病”就出現(xiàn)了。這僅是我的猜測而已，真正的原因還是去問IE6的后媽吧。

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

四、固執(zhí)的IE6：它只認第一個爸爸
可能不少人知道，這IE6下，層級的高低不僅要看自己，還要看自己的老爸這個后臺是否夠硬。用術語具體描述為：
父標簽position屬性為relative或absolute時，子標簽的absolute屬性是相對于父標簽而言的。而在IE6下，層級的表現(xiàn)有時候不是看子標簽的z-index多高，而要看它們的父標簽的z-index誰高誰低。

有一定經驗的人可能都知道上面的事實。但是，相信這里面很多人不知道IE6下，決定層級高低的不是當前的父標簽，而是整個DOM tree（節(jié)點樹）的第一個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=”/files/2010/12/bbs/mm3.jpg” />
</div>
</div>
</div>
可以看到，mm3圖片的父標簽div 是絕對定位，層級9999，比1大多了，絕對定位的父標簽層級1000(10000也一樣)，也比黑色半透明層的z-index:1大多了，但是，我們可憐的IE6童鞋——

再看看以Firefox為代表的其他童鞋：

IE7與IE6有著同樣的bug，原因很簡單，雖然圖片所在div當前的老爸層級很高(1000)，但是由于老爸的老爸不頂用，可憐了9999如此強勢的孩子沒有出頭之日?。?/p>

知道原因解決就很輕松了，給第一任老爸添加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=”/files/2010/12/bbs/mm3.jpg” />
</div>
</div>
</div>
結果IE6童鞋喜笑顏開，春光燦爛：

您可以狠狠地點擊這里：改變父標簽層級在線demo測試

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

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

原創(chuàng)地址：http://www.zhangxinxu.com/wordpress/?p=471