IE6下z-index犯癫不起作用bug的初步研究
by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=471
一、匆匆帶過的概念
關于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不起 作用的問題。
二、關于效果截圖的些必要說明
下面的不是廢話，是為了更容易的理解我下面唾沫橫飛的內容。
以下所有結果截圖的大背景如下：
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;}
作用是為了讓層級關系一目了然?？?#xff1a;
這說明內容在z-index為1的絕對定位層之下。
這說明內容在z-index為1的絕對定位層之上。
2、頁面上做對比的是美女圖片，圖片在半透明黑色絕對定位層的上面還是下面很容易辨別，這樣，您就能夠對我所說的z-index不起作用有很直觀的認識了。
三、IE6的抱怨：浮動讓我沉淪
現在開始真正的講述問題的產生，原因以及解決了。首先講講第一種z-index無論設置多高都不起作用情況。這種情況發生的條件有三個：1、父標簽 position屬性為relative；2、問題標簽無position屬性（不包括static）；3、問題標簽含有浮動(float)屬性。
您可以拿下面的代碼自己做個簡單測試：
<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的后媽吧。
解決方法，解決方法有三，1、position:relative改為position:absolute；2、去除浮動；3、浮動元素添加position屬性（如relative，absolute等）。
四、固執的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測試
五、必要的結語
老實講，我對z-index研究的精力其實比較有限，本文的兩個bug研究都屬于停留在表層的。z-index這玩意深不可測，里面所蘊含的知識不是 CSS手冊上的那點東西，那只是冰山一角。這涉及到border及background的堆疊模型，涉及到同層級的顯示問題，以及瀏覽器顯示的些機制等， 這是很深的一潭水。
總之，慢慢來，慢慢積累，慢慢研究，一定會一步一步揭開z-index的本質面紗的。
原創文章，轉載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=471
（本篇完）
轉載于:https://www.cnblogs.com/wqj0405/archive/2011/08/05/2128458.html
總結
以上是生活随笔為你收集整理的IE6下z-index犯癫不起作用bug的初步研究的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Effective C++ 学习笔记（1
- 下一篇： ACPI知识学习笔记