by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=471

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

在photoshop中，層的高低就是靠手動(dòng)調(diào)的，鼠標(biāo)拖拽，或是ctrl+]或是ctrl+shift+[快捷鍵改變層的次序。如下圖，鼠標(biāo)拖移改變層次序的過(guò)程中：

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

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

按照正常的思維，z-index層級(jí)越高，內(nèi)容越應(yīng)該在上面顯示。在大部分的瀏覽器在大部分的情況下，確實(shí)如此，但是不絕對(duì)。尤其遇到IE6，這家 伙，估計(jì)是后媽帶大的，從小營(yíng)養(yǎng)不良，結(jié)果后來(lái)健康問(wèn)題一堆又一堆。z-index的問(wèn)題就是其中之一，而本文就是要講講這個(gè)IE6下z-index不起 作用的問(wèn)題。

二、關(guān)于效果截圖的些必要說(shuō)明
下面的不是廢話，是為了更容易的理解我下面唾沫橫飛的內(nèi)容。

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

作用是為了讓層級(jí)關(guān)系一目了然。看：

這說(shuō)明內(nèi)容在z-index為1的絕對(duì)定位層之下。

這說(shuō)明內(nèi)容在z-index為1的絕對(duì)定位層之上。

2、頁(yè)面上做對(duì)比的是美女圖片，圖片在半透明黑色絕對(duì)定位層的上面還是下面很容易辨別，這樣，您就能夠?qū)ξ宜f(shuō)的z-index不起作用有很直觀的認(rèn)識(shí)了。

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

<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了，層級(jí)夠高吧，但是，看下面的圖：

這一對(duì)比就知道問(wèn)題了，可能有人會(huì)疑問(wèn)，這會(huì)不會(huì)是IE6的relative自己感冒了，而不是浮動(dòng)(float)攜帶了“甲流病毒”。好，我現(xiàn)在去掉浮動(dòng)，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>

結(jié)果IE6下：

您可以狠狠地點(diǎn)擊這里：在線demo測(cè)試

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

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

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

有一定經(jīng)驗(yàn)的人可能都知道上面的事實(shí)。但是，相信這里面很多人不知道IE6下，決定層級(jí)高低的不是當(dāng)前的父標(biāo)簽，而是整個(gè)DOM tree（節(jié)點(diǎn)樹(shù)）的第一個(gè)relative屬性的父標(biāo)簽。有時(shí)平時(shí)我們多處理一個(gè)父標(biāo)簽，z-index層級(jí)多而復(fù)雜的情況不多見(jiàn)，所以難免會(huì)有認(rèn)識(shí)上 的小小偏差。

好，下面展示這個(gè)bug。

條件很簡(jiǎn)單，只要絕對(duì)定位的第一個(gè)元素的第一個(gè)爸爸，或者說(shuō)是最老的那個(gè)爸爸級(jí)別的人的relative屬性小于黑色半透明層的z-index層級(jí)。例如下面的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圖片的父標(biāo)簽div 是絕對(duì)定位，層級(jí)9999，比1大多了，絕對(duì)定位的父標(biāo)簽層級(jí)1000(10000也一樣)，也比黑色半透明層的z-index:1大多了，但是，我們可憐的IE6童鞋——

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

IE7與IE6有著同樣的bug，原因很簡(jiǎn)單，雖然圖片所在div當(dāng)前的老爸層級(jí)很高(1000)，但是由于老爸的老爸不頂用，可憐了9999如此強(qiáng)勢(shì)的孩子沒(méi)有出頭之日啊！

知道原因解決就很輕松了，給第一任老爸添加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>

結(jié)果IE6童鞋喜笑顏開(kāi)，春光燦爛：

您可以狠狠地點(diǎn)擊這里：改變父標(biāo)簽層級(jí)在線demo測(cè)試

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

總之，慢慢來(lái)，慢慢積累，慢慢研究，一定會(huì)一步一步揭開(kāi)z-index的本質(zhì)面紗的。

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來(lái)自張?chǎng)涡?鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=471

（本篇完）

轉(zhuǎn)載于:https://www.cnblogs.com/wqj0405/archive/2011/08/05/2128458.html

總結(jié)

以上是生活随笔為你收集整理的IE6下z-index犯癫不起作用bug的初步研究的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。