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

css z-index 在IE中的迷惑

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

引用:
z-index : auto | number

auto:默認值。
number:無單位的整數(shù)值,可為負數(shù)。

z-index 值較大的元素將疊加在z-index值較小的元素之上。對于未指定此屬性的定位對象,z-index 值為正數(shù)的對象會在其之上,而z-index 值為負數(shù)的對象在其之下。

注意:這個屬性不會作用于窗口控件,如selct 對象。在IE 5.5+中,iframe 對象開始支持此屬性。而在之前的瀏覽器版本中,iframe 對象是窗口控件,會忽略此屬性。

z-index屬性適用于定位元素(position 屬性值為 relative 或 absolute 或 fixed的對象),用來確定定位元素在垂直于顯示屏方向(稱為Z軸)上的層疊順序(stack order)。

每一個定位元素都歸屬于一個stacking context。根元素形成root stacking context,而其他的stacking context則由定位元素產(chǎn)生(此定位元素的z-index被定義一個非auto的z-index值),定位子元素會以這個local stacking context為參考,用相同的規(guī)則來決定層疊順序。并且stacking context和 containing block 之間并沒有必然聯(lián)系。

當stacking context一樣的時候,就用z-index的值來決定怎樣顯示,如果z-index也相同(即stack level相同),則按照檔中后來者居上的原則(back-to-front )的順序來層疊。

當任何一個元素層疊另一個包含在不同stacking context元素時,則會以stacking context的層疊級別(stack level)來決定顯示的先后情況。也就是說,在相同的stacking context下才會用z-index來決定先后,不同時則由stacking context的z-index來決定。例如:
定位元素A(z-index:100)里面有定位元素A1(z-index:300),而定位元素B和元素A兄弟關(guān)系(z-index:200)。你會發(fā)現(xiàn)無論A1的z-index是多大,也會被z-index是200的B所覆蓋,因為A的z-index只有100。

IE中z-index BUG
首先先來看一個演示例子的代碼部分。
XHTML部分: <div id="container">
<div id="box1">這個box應(yīng)該在上面</div>
</div>
<div id="box2">這個box應(yīng)該在下面,IE瀏覽器會對定位元素產(chǎn)生一個新的stacking context ,甚至當元素 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為默認值auto。所以按理他不會影響子元素的層疊順序。即背景色為黃色的box1和背景色為綠色的box2的stacking context相同,即都為根元素產(chǎn)生的root stacking context。再根據(jù)規(guī)則中當stacking context一樣的時候,就用z-index的值來決定怎樣顯示的原理,則應(yīng)該z-index屬性值20的背景色為黃色的box1在z-index屬性值10背景色為綠色的box2之上。

下面我們在FF和IE中分別測試最終的效果,會發(fā)現(xiàn)FF中顯示的效果和上面分析的效果是完全一致的,而IE中的顯示卻不一致。

迷惑:在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的負值解析,很多朋友因為這個BUG的存在甚至武斷的認為IE支持z-index的負值,而FF不支持z-index的負值。

舉個例子或許更能形象表達。

XHTML部分:

<body>
<div id="container">
<div id="box1">為什么負值的定位元素在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; }
大家會發(fā)現(xiàn)在FF下,背景色為黃色的box1消失了,而IE下卻顯示。這也是我上面所說的,部分朋友武斷的認為IE支持z-index的負值,而FF不支持z-index的負值的原因。我們要透過現(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 值為負數(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">為什么負值的定位元素在IE和FF下顯示不一致呢?Why?</div>
</body>
CSS部分:

#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }
大家會發(fā)現(xiàn)和上面沒精簡的代碼顯示的結(jié)果是一致的。但如果用上面的理解在IE下或許無法解釋通。因為此時的理解背景色為黃色的box1的stacking context無論在FF下還是在IE下都是根元素產(chǎn)生的root stacking context。

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

相關(guān)文章

最新評論