|
首先先來看一個演示例子的代碼部分。
XHTML部分：
<div id="container">
<div id="box1">這個box應(yīng)該在上面</div>
</div>
<div id="box2">這個box應(yīng)該在下面，IE瀏覽器會對定位元素產(chǎn)生一個新的stacking context ，甚至當(dāng)元素 z-index的為“auto”。</div>
CSS部分：
#container { position: relative; }
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; }
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; }
兩個box被完全的定位，背景色為黃色的box1擁有z-index屬性值20，而背景色為綠色的box2擁有z-index屬性值10，唯一的區(qū)別在于背景色為黃色的box1被放在了一個定義了屬性position:relative的div中，并且在文檔源代碼中位前。
根據(jù)上述代碼以及z-index的屬性簡介，我們來分析上面代碼將會產(chǎn)生的效果位置。
CSS specification 中清楚的規(guī)定了除了根元素，只有定位元素的z-index被定義一個非auto的z-index值才能產(chǎn)生新的stacking context。而例子中被相對定位的元素并沒有定義z-index，即z-index為默認(rèn)值auto。所以按理他不會影響子元素的層疊順序。即背景色為黃色的box1和背景色為綠色的box2的stacking context相同，即都為根元素產(chǎn)生的root stacking context。再根據(jù)規(guī)則中當(dāng)stacking context一樣的時候，就用z-index的值來決定怎樣顯示的原理，則應(yīng)該z-index屬性值20的背景色為黃色的box1在z-index屬性值10背景色為綠色的box2之上。
下面我們在FF和IE中分別測試最終的效果，會發(fā)現(xiàn)FF中顯示的效果和上面分析的效果是完全一致的，而IE中的顯示卻不一致。
演示地址：http://www.planabc.net/demo/z-index01.html
迷惑：在IE的z-index屬性值10背景色為綠色的box卻在了z-index屬性值20的背景色為黃色的box1之上，和我們分析的結(jié)果完全不一致，為什么呢？
解惑：其實這是IE瀏覽器（windows）的一個BUG——在IE瀏覽器中，定位元素會產(chǎn)生一個新的stacking context，并且從z-index的值為0開始。
現(xiàn)在讓我們來理解上面的演示在IE中的顯示邏輯。設(shè)置了相對定位的container產(chǎn)生一個新的stacking context，所以其被定位的子元素背景色為黃色的box1以這個新的stacking context為參考來決定層疊順序。而背景色為綠色的box2此時和背景色為黃色的box1的父元素container為同一個stacking context，所以他們之間按照z-index來決定層疊順序，即z-index屬性值10背景色為綠色的box2在z-index屬性值0的container之上。
其實這個BUG的影響范圍很廣，只是大家平時不太注意。下面來說明一個最常見的出現(xiàn)情況z-index的負(fù)值解析，很多朋友因為這個BUG的存在甚至武斷的認(rèn)為IE支持z-index的負(fù)值，而FF不支持z-index的負(fù)值。
舉個例子或許更能形象表達(dá)。
XHTML部分：
<body>
<div id="container">
<div id="box1">為什么負(fù)值的定位元素在IE和FF下顯示不一致呢？Why？</div>
</div>
</body>
CSS部分：
#container { position: relative; }
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }
演示地址：http://www.planabc.net/demo/z-index02.html
大家會發(fā)現(xiàn)在FF下，背景色為黃色的box1消失了，而IE下卻顯示。這也是我上面所說的，部分朋友武斷的認(rèn)為IE支持z-index的負(fù)值，而FF不支持z-index的負(fù)值的原因。我們要透過現(xiàn)象看本質(zhì)。
在上個例子中的分析，我們知道：設(shè)置了相對位置（position: relative）的元素但沒有給出非auto的z-index就不會產(chǎn)生stacking context，也就不會影響其子元素的層疊順序。所以背景色為黃色的box1的stacking context為根元素產(chǎn)生的root stacking context。在上一節(jié)中我們講到“對于未指定此屬性的定位對象，z-index 值為正數(shù)的對象會在其之上，而 z-index 值為負(fù)數(shù)的對象在其之下”，按照規(guī)則，應(yīng)該是設(shè)定了z-index為-10的黃色的box1會顯示在于未指定z-index屬性的元素（比如body）之下。所以在FF下背景色為黃色的box1消失了。而在IE中設(shè)置了相對位置的 container會擁有z-index值0，產(chǎn)生一個新的stacking context，背景色為黃色的box1在新的stacking context內(nèi)層疊順序，故在IE中會看到顯示。
不過這里還有一個問題，對于上面的代碼，我們再精簡一下：
XHTML部分：
<body>
<div id="box1">為什么負(fù)值的定位元素在IE和FF下顯示不一致呢？Why？</div>
</body>
CSS部分：
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }
演示地址：http://www.planabc.net/demo/z-index03.html
大家會發(fā)現(xiàn)和上面沒精簡的代碼顯示的結(jié)果是一致的。但如果用上面的理解在IE下或許無法解釋通。因為此時的理解背景色為黃色的box1的stacking context無論在FF下還是在IE下都是根元素產(chǎn)生的root stacking context。
迷惑：那么在IE瀏覽器中，按照規(guī)則，背景色為黃色的box1也應(yīng)該消失，然而卻沒有。
解惑：IE瀏覽器似乎給body元素默認(rèn)了一個相對定位屬性（position: relative）。
通過上面兩個簡單的例子，我想大家應(yīng)該大致知道為什么負(fù)值的z-index在IE和FF解析不一樣，不是FF不支持，而是IE的BUG。
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2739193-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2007/4668.asp 
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 z-index屬性簡介 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 2 頁 IE中z-index BUG
