css z-index 在IE中的迷惑
發(fā)布時(shí)間:2009-05-29 20:57:30 作者:佚名
我要評論

z-index屬性簡介
引用:
z-index : auto | number
auto:默認(rèn)值。
number:無單位的整數(shù)值,可為負(fù)數(shù)。
z-index 值較大的元素將疊加在z-index值較小的元素之上。對于未指定此屬性的定位對象,z-index 值為正數(shù)的對象會(huì)在其之上,而z-index 值為負(fù)數(shù)的對象在其之下。
下面我們在FF和IE中分別測試最終的效果,會(huì)發(fā)現(xiàn)FF中顯示的效果和上面分析的效果是完全一致的,而IE中的顯示卻不一致。
迷惑:在IE的z-index屬性值10背景色為綠色的box卻在了z-index屬性值20的背景色為黃色的box1之上,和我們分析的結(jié)果完全不一致,為什么呢?
解惑:其實(shí)這是IE瀏覽器(windows)的一個(gè)BUG——在IE瀏覽器中,定位元素會(huì)產(chǎn)生一個(gè)新的stacking context,并且從z-index的值為0開始。
現(xiàn)在讓我們來理解上面的演示在IE中的顯示邏輯。設(shè)置了相對定位的container產(chǎn)生一個(gè)新的stacking context,所以其被定位的子元素背景色為黃色的box1以這個(gè)新的stacking context為參考來決定層疊順序。而背景色為綠色的box2此時(shí)和背景色為黃色的box1的父元素container為同一個(gè)stacking context,所以他們之間按照z-index來決定層疊順序,即z-index屬性值10背景色為綠色的box2在z-index屬性值0的container之上。
其實(shí)這個(gè)BUG的影響范圍很廣,只是大家平時(shí)不太注意。下面來說明一個(gè)最常見的出現(xiàn)情況z-index的負(fù)值解析,很多朋友因?yàn)檫@個(gè)BUG的存在甚至武斷的認(rèn)為IE支持z-index的負(fù)值,而FF不支持z-index的負(fù)值。
舉個(gè)例子或許更能形象表達(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; }
大家會(huì)發(fā)現(xiàn)在FF下,背景色為黃色的box1消失了,而IE下卻顯示。這也是我上面所說的,部分朋友武斷的認(rèn)為IE支持z-index的負(fù)值,而FF不支持z-index的負(fù)值的原因。我們要透過現(xiàn)象看本質(zhì)。
在上個(gè)例子中的分析,我們知道:設(shè)置了相對位置(position: relative)的元素但沒有給出非auto的z-index就不會(huì)產(chǎn)生stacking context,也就不會(huì)影響其子元素的層疊順序。所以背景色為黃色的box1的stacking context為根元素產(chǎn)生的root stacking context。在上一節(jié)中我們講到“對于未指定此屬性的定位對象,z-index 值為正數(shù)的對象會(huì)在其之上,而 z-index 值為負(fù)數(shù)的對象在其之下”,按照規(guī)則,應(yīng)該是設(shè)定了z-index為-10的黃色的box1會(huì)顯示在于未指定z-index屬性的元素(比如body)之下。所以在FF下背景色為黃色的box1消失了。而在IE中設(shè)置了相對位置的 container會(huì)擁有z-index值0,產(chǎn)生一個(gè)新的stacking context,背景色為黃色的box1在新的stacking context內(nèi)層疊順序,故在IE中會(huì)看到顯示。
不過這里還有一個(gè)問題,對于上面的代碼,我們再精簡一下:
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; }
大家會(huì)發(fā)現(xiàn)和上面沒精簡的代碼顯示的結(jié)果是一致的。但如果用上面的理解在IE下或許無法解釋通。因?yàn)榇藭r(shí)的理解背景色為黃色的box1的stacking context無論在FF下還是在IE下都是根元素產(chǎn)生的root stacking context。
迷惑:那么在IE瀏覽器中,按照規(guī)則,背景色為黃色的box1也應(yīng)該消失,然而卻沒有。
解惑:IE瀏覽器似乎給body元素默認(rèn)了一個(gè)相對定位屬性(position: relative)。
相關(guān)文章
- z-index最大值,最小值以及同值時(shí)層的高低,做了個(gè)測試z-index的最大值,有幾個(gè)結(jié)論如下2009-05-28
CSS教程:元素層疊級別及z-index-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
原文:http://rong179.blogbus.com/logs/24966909.html 聲明 定位元素:position屬性值設(shè)置除默認(rèn)值static以外的元素,包括relative,absolute,fixed。 平臺:win/I2008-10-17- 設(shè)置z-index時(shí)必須要固定位置,這樣設(shè)置它的值時(shí)才能奏效(例如 position:absolute;)下面是示例代碼,在ff3.5.5和ie5.5~ie8.0RC1中通過,大家可以嘗試著不固定其位置試試2009-11-26
CSS教程:網(wǎng)頁布局定位及z-index解釋-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
聲明 定位元素: position屬性值設(shè)置除默認(rèn)值static以外的元素,包括relative,absolute,fixed。 平臺:win/IE win/FF z-index 用來確定定位元素在垂直于顯示屏2008-10-17- IE6/7對z-index的表現(xiàn)跟IE8及以上瀏覽器不一致。position值為非static時(shí),如果不設(shè)置z-index屬性,IE6/7下z-index默認(rèn)為0,而IE8及以上瀏覽器z-index為auto,且zindex:auto2012-11-13
一個(gè)關(guān)于CSS Z-index 的東東,解決了我很多疑問
發(fā)現(xiàn)有時(shí)候真得多看看書,以前一直納悶為什么有時(shí)候可以,有時(shí)候不可以,原來是這個(gè)原因.2011-03-23- 寫了個(gè)最簡單的DEMO,演示了3個(gè)DIV互相遮蓋的情況。記住:z-index要配合position屬性才有效2012-02-25
- 可是真有些日子沒有寫DIV+CSS了,而且對IE6兼容性的坑碰到的還是不夠多(以前做國外項(xiàng)目),所以這次開發(fā)中不可避免的碰見了幾個(gè)問題,尤其是在IE下的 z-index 問題很有意思2013-01-09
CSS元素的層疊與z-index設(shè)置-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
我們在文章的更新中,特別注重對新手的輔導(dǎo),但webjx.com面對的是廣大的開發(fā)人員,大家可能會(huì)遇到各種各樣的問題,有些問題很不常見,或者應(yīng)用的很少,但我們依然有必2008-10-17- 在這篇文章里,我們會(huì)準(zhǔn)確的說明究竟什么是Z-index,它為什么會(huì)這么不為人所了解,并一起討論一些關(guān)于它的實(shí)際使用中的問題。我們同時(shí)會(huì)描述一些會(huì)遇到的瀏覽器間的差異,2014-10-22