css z-index 在IE中的迷惑
發(fā)布時(shí)間：2009-05-29 20:57:30 作者：佚名 
我要評(píng)論
我要評(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ì)象在其之下。
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ì)象在其之下。
注意：這個(gè)屬性不會(huì)作用于窗口控件，如selct 對(duì)象。在IE 5.5＋中，iframe 對(duì)象開始支持此屬性。而在之前的瀏覽器版本中，iframe 對(duì)象是窗口控件，會(huì)忽略此屬性。
z-index屬性適用于定位元素（position 屬性值為 relative 或 absolute 或 fixed的對(duì)象），用來(lái)確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序（stack order）。
每一個(gè)定位元素都?xì)w屬于一個(gè)stacking context。根元素形成root stacking context，而其他的stacking context則由定位元素產(chǎn)生（此定位元素的z-index被定義一個(gè)非auto的z-index值），定位子元素會(huì)以這個(gè)local stacking context為參考，用相同的規(guī)則來(lái)決定層疊順序。并且stacking context和 containing block 之間并沒有必然聯(lián)系。
當(dāng)stacking context一樣的時(shí)候，就用z-index的值來(lái)決定怎樣顯示，如果z-index也相同（即stack level相同），則按照檔中后來(lái)者居上的原則（back-to-front ）的順序來(lái)層疊。
當(dāng)任何一個(gè)元素層疊另一個(gè)包含在不同stacking context元素時(shí)，則會(huì)以stacking context的層疊級(jí)別（stack level）來(lái)決定顯示的先后情況。也就是說(shuō)，在相同的stacking context下才會(huì)用z-index來(lái)決定先后，不同時(shí)則由stacking context的z-index來(lái)決定。例如：
定位元素A（z-index:100）里面有定位元素A1（z-index:300），而定位元素B和元素A兄弟關(guān)系（z-index:200）。你會(huì)發(fā)現(xiàn)無(wú)論A1的z-index是多大，也會(huì)被z-index是200的B所覆蓋，因?yàn)锳的z-index只有100。
IE中z-index BUG
首先先來(lái)看一個(gè)演示例子的代碼部分。
XHTML部分： <div id="container">
<div id="box1">這個(gè)box應(yīng)該在上面</div>
</div>
<div id="box2">這個(gè)box應(yīng)該在下面，IE瀏覽器會(huì)對(duì)定位元素產(chǎn)生一個(gè)新的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; }
兩個(gè)box被完全的定位，背景色為黃色的box1擁有z-index屬性值20，而背景色為綠色的box2擁有z-index屬性值10，唯一的區(qū)別在于背景色為黃色的box1被放在了一個(gè)定義了屬性position:relative的div中，并且在文檔源代碼中位前。
根據(jù)上述代碼以及z-index的屬性簡(jiǎn)介，我們來(lái)分析上面代碼將會(huì)產(chǎn)生的效果位置。
CSS specification 中清楚的規(guī)定了除了根元素，只有定位元素的z-index被定義一個(gè)非auto的z-index值才能產(chǎn)生新的stacking context。而例子中被相對(duì)定位的元素并沒有定義z-index，即z-index為默認(rèn)值auto。所以按理他不會(huì)影響子元素的層疊順序。即背景色為黃色的box1和背景色為綠色的box2的stacking context相同，即都為根元素產(chǎn)生的root stacking context。再根據(jù)規(guī)則中當(dāng)stacking context一樣的時(shí)候，就用z-index的值來(lái)決定怎樣顯示的原理，則應(yīng)該z-index屬性值20的背景色為黃色的box1在z-index屬性值10背景色為綠色的box2之上。
下面我們?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）的元素但沒有給出非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)和上面沒精簡(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)該消失，然而卻沒有。
解惑：IE瀏覽器似乎給body元素默認(rèn)了一個(gè)相對(duì)定位屬性（position: relative）。
引用:
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ì)象在其之下。
注意：這個(gè)屬性不會(huì)作用于窗口控件，如selct 對(duì)象。在IE 5.5＋中，iframe 對(duì)象開始支持此屬性。而在之前的瀏覽器版本中，iframe 對(duì)象是窗口控件，會(huì)忽略此屬性。
z-index屬性適用于定位元素（position 屬性值為 relative 或 absolute 或 fixed的對(duì)象），用來(lái)確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序（stack order）。
每一個(gè)定位元素都?xì)w屬于一個(gè)stacking context。根元素形成root stacking context，而其他的stacking context則由定位元素產(chǎn)生（此定位元素的z-index被定義一個(gè)非auto的z-index值），定位子元素會(huì)以這個(gè)local stacking context為參考，用相同的規(guī)則來(lái)決定層疊順序。并且stacking context和 containing block 之間并沒有必然聯(lián)系。
當(dāng)stacking context一樣的時(shí)候，就用z-index的值來(lái)決定怎樣顯示，如果z-index也相同（即stack level相同），則按照檔中后來(lái)者居上的原則（back-to-front ）的順序來(lái)層疊。
當(dāng)任何一個(gè)元素層疊另一個(gè)包含在不同stacking context元素時(shí)，則會(huì)以stacking context的層疊級(jí)別（stack level）來(lái)決定顯示的先后情況。也就是說(shuō)，在相同的stacking context下才會(huì)用z-index來(lái)決定先后，不同時(shí)則由stacking context的z-index來(lái)決定。例如：
定位元素A（z-index:100）里面有定位元素A1（z-index:300），而定位元素B和元素A兄弟關(guān)系（z-index:200）。你會(huì)發(fā)現(xiàn)無(wú)論A1的z-index是多大，也會(huì)被z-index是200的B所覆蓋，因?yàn)锳的z-index只有100。
IE中z-index BUG
首先先來(lái)看一個(gè)演示例子的代碼部分。
XHTML部分： <div id="container">
<div id="box1">這個(gè)box應(yīng)該在上面</div>
</div>
<div id="box2">這個(gè)box應(yīng)該在下面，IE瀏覽器會(huì)對(duì)定位元素產(chǎn)生一個(gè)新的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; }
兩個(gè)box被完全的定位，背景色為黃色的box1擁有z-index屬性值20，而背景色為綠色的box2擁有z-index屬性值10，唯一的區(qū)別在于背景色為黃色的box1被放在了一個(gè)定義了屬性position:relative的div中，并且在文檔源代碼中位前。
根據(jù)上述代碼以及z-index的屬性簡(jiǎn)介，我們來(lái)分析上面代碼將會(huì)產(chǎn)生的效果位置。
CSS specification 中清楚的規(guī)定了除了根元素，只有定位元素的z-index被定義一個(gè)非auto的z-index值才能產(chǎn)生新的stacking context。而例子中被相對(duì)定位的元素并沒有定義z-index，即z-index為默認(rèn)值auto。所以按理他不會(huì)影響子元素的層疊順序。即背景色為黃色的box1和背景色為綠色的box2的stacking context相同，即都為根元素產(chǎn)生的root stacking context。再根據(jù)規(guī)則中當(dāng)stacking context一樣的時(shí)候，就用z-index的值來(lái)決定怎樣顯示的原理，則應(yīng)該z-index屬性值20的背景色為黃色的box1在z-index屬性值10背景色為綠色的box2之上。
下面我們?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）的元素但沒有給出非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)和上面沒精簡(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)該消失，然而卻沒有。
解惑：IE瀏覽器似乎給body元素默認(rèn)了一個(gè)相對(duì)定位屬性（position: relative）。
相關(guān)文章
- z-index最大值,最小值以及同值時(shí)層的高低，做了個(gè)測(cè)試z-index的最大值,有幾個(gè)結(jié)論如下2009-05-28
CSS教程:元素層疊級(jí)別及z-index-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
原文：http://rong179.blogbus.com/logs/24966909.html 聲明 定位元素：position屬性值設(shè)置除默認(rèn)值static以外的元素，包括relative，absolute，fixed。 平臺(tái)：win/I2008-10-17- 設(shè)置z-index時(shí)必須要固定位置，這樣設(shè)置它的值時(shí)才能奏效（例如 position:absolute;）下面是示例代碼，在ff3.5.5和ie5.5~ie8.0RC1中通過(guò)，大家可以嘗試著不固定其位置試試2009-11-26
CSS教程:網(wǎng)頁(yè)布局定位及z-index解釋-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
聲明 定位元素： position屬性值設(shè)置除默認(rèn)值static以外的元素，包括relative，absolute，fixed。 平臺(tái)：win/IE win/FF z-index 用來(lái)確定定位元素在垂直于顯示屏2008-10-17- IE6/7對(duì)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 的東東,解決了我很多疑問(wèn)
發(fā)現(xiàn)有時(shí)候真得多看看書,以前一直納悶為什么有時(shí)候可以,有時(shí)候不可以,原來(lái)是這個(gè)原因.2011-03-23- 寫了個(gè)最簡(jiǎn)單的DEMO，演示了3個(gè)DIV互相遮蓋的情況。記住：z-index要配合position屬性才有效2012-02-25
ie下的css層疊z-index各種問(wèn)題詳細(xì)整理
可是真有些日子沒有寫DIV+CSS了，而且對(duì)IE6兼容性的坑碰到的還是不夠多(以前做國(guó)外項(xiàng)目)，所以這次開發(fā)中不可避免的碰見了幾個(gè)問(wèn)題，尤其是在IE下的 z-index 問(wèn)題很有意思2013-01-09CSS元素的層疊與z-index設(shè)置-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
我們?cè)谖恼碌母轮?，特別注重對(duì)新手的輔導(dǎo)，但webjx.com面對(duì)的是廣大的開發(fā)人員，大家可能會(huì)遇到各種各樣的問(wèn)題，有些問(wèn)題很不常見，或者應(yīng)用的很少，但我們依然有必2008-10-17- 在這篇文章里，我們會(huì)準(zhǔn)確的說(shuō)明究竟什么是Z-index，它為什么會(huì)這么不為人所了解，并一起討論一些關(guān)于它的實(shí)際使用中的問(wèn)題。我們同時(shí)會(huì)描述一些會(huì)遇到的瀏覽器間的差異，2014-10-22