欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css z-index 在IE中的迷惑

  發(fā)布時(shí)間：2009-05-29 20:57:30   作者：佚名   我要評(píng)論
z-index屬性簡(jiǎn)介 引用: z-index : auto | number auto：默認(rèn)值。 number：無(wú)單位的整數(shù)值，可為負(fù)數(shù)。 z-index 值較大的元素將疊加在z-index值較小的元素之上。對(duì)于未指定此屬性的定位對(duì)象，z-index 值為正數(shù)的對(duì)象會(huì)在其之上，而z-index 值為負(fù)數(shù)的對(duì)象在其之下。

下面我們?cè)贔F和IE中分別測(cè)試最終的效果，會(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)在讓我們來(lái)理解上面的演示在IE中的顯示邏輯。設(shè)置了相對(duì)定位的container產(chǎn)生一個(gè)新的stacking context，所以其被定位的子元素背景色為黃色的box1以這個(gè)新的stacking context為參考來(lái)決定層疊順序。而背景色為綠色的box2此時(shí)和背景色為黃色的box1的父元素container為同一個(gè)stacking context，所以他們之間按照z-index來(lái)決定層疊順序，即z-index屬性值10背景色為綠色的box2在z-index屬性值0的container之上。

其實(shí)這個(gè)BUG的影響范圍很廣，只是大家平時(shí)不太注意。下面來(lái)說(shuō)明一個(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下卻顯示。這也是我上面所說(shuō)的，部分朋友武斷的認(rèn)為IE支持z-index的負(fù)值，而FF不支持z-index的負(fù)值的原因。我們要透過(guò)現(xiàn)象看本質(zhì)。

在上個(gè)例子中的分析，我們知道：設(shè)置了相對(duì)位置（position: relative）的元素但沒(méi)有給出非auto的z-index就不會(huì)產(chǎn)生stacking context，也就不會(huì)影響其子元素的層疊順序。所以背景色為黃色的box1的stacking context為根元素產(chǎn)生的root stacking context。在上一節(jié)中我們講到“對(duì)于未指定此屬性的定位對(duì)象，z-index 值為正數(shù)的對(duì)象會(huì)在其之上，而 z-index 值為負(fù)數(shù)的對(duì)象在其之下”，按照規(guī)則，應(yīng)該是設(shè)定了z-index為-10的黃色的box1會(huì)顯示在于未指定z-index屬性的元素（比如body）之下。所以在FF下背景色為黃色的box1消失了。而在IE中設(shè)置了相對(duì)位置的 container會(huì)擁有z-index值0，產(chǎn)生一個(gè)新的stacking context，背景色為黃色的box1在新的stacking context內(nèi)層疊順序，故在IE中會(huì)看到顯示。

不過(guò)這里還有一個(gè)問(wèn)題，對(duì)于上面的代碼，我們?cè)倬?jiǎn)一下：

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)和上面沒(méi)精簡(jiǎn)的代碼顯示的結(jié)果是一致的。但如果用上面的理解在IE下或許無(wú)法解釋通。因?yàn)榇藭r(shí)的理解背景色為黃色的box1的stacking context無(wú)論在FF下還是在IE下都是根元素產(chǎn)生的root stacking context。

迷惑：那么在IE瀏覽器中，按照規(guī)則，背景色為黃色的box1也應(yīng)該消失，然而卻沒(méi)有。
解惑：IE瀏覽器似乎給body元素默認(rèn)了一個(gè)相對(duì)定位屬性（position: relative）。

相關(guān)文章

最新評(píng)論