91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

這是一個(gè)在鑫空間里轉(zhuǎn)過來一篇文章，作者寫的很詳細(xì)，很給力，不感獨(dú)享。

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

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

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

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

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

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

以下所有結(jié)果截圖的大背景如下：
1、頁面上固定不動(dòng)的，一成不變的，送豪宅也不會(huì)從良的是一個(gè)黑色背景，透明度40%，幾乎滿屏顯示的層級為1的絕對定位層。HTML為：<div id="blank"></div>，對應(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;}

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

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

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

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

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

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

這一對比就知道問題了，可能有人會(huì)疑問，這會(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=”/files/2010/12/bbs/mm2.jpg” />
</div>
結(jié)果IE6下：

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

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

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

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

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

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

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

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

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

知道原因解決就很輕松了，給第一任老爸添加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>
結(jié)果IE6童鞋喜笑顏開，春光燦爛：

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

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

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

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