我們在文章的更新中，特別注重對新手的輔導，但jb51.net面對的是廣大的開發(fā)人員，大家可能會遇到各種各樣的問題，有些問題很不常見，或者應用的很少，但我們依然有必要學習更多的CSS布局知識與技術(shù)，以應對可能出現(xiàn)的復雜多變的CSS內(nèi)外形勢（挺汗）。今天這篇文章，主要介紹了元素的層疊與z-index設置，希望對您有所幫助，更多的知識，請多多參考jb51.net的教程。
聲明
　　定位元素：position屬性值設置除默認值static以外的元素，包括relative，absolute，fixed。
　　平臺：win/IE win/FF
z-index:
　　用來確定定位元素在垂直于顯示屏方向（以下稱為Z軸）上的層疊順序
　　值：　　　auto | 整數(shù) | inherit
　　默認：　　auto
　　適用于：　定位元素
　　繼承性：　no
理解stacking context
　　每個box都歸屬于一個stacking context,它是元素在z軸方向上定位的參考。根元素形成 root stacking context，其他stacking context由定位元素設置z-index為非auto時產(chǎn)生。如#div1{position:relative;z-index:0;}即可使 id=div1的元素產(chǎn)生stacking context。stacking context和 containing block 并沒有必然聯(lián)系。
理解stack level
　　在一個stacking context中的每個box，都有一個stack level（即層疊級別，以下統(tǒng)一用stack level），它決定著在同一stacking context中每個box在z軸上的顯示順序。同一stacking context中，stack level值大的顯示在上，stack level值小的顯示在下，同一stack level的遵循后來居上的原則（back-to-front ）。不同stacking context中，元素顯示順序以父級的stacking context的stack level來決定顯示的先后情況。于自身stack level無關(guān)。注意stack level和z-index并不是統(tǒng)一概念。（將在后文慢慢理解）
stack level規(guī)則
　　每個stacking context中可包含塊級（block）元素、內(nèi)聯(lián)（行內(nèi)inline）元素，還有設置float屬性的元素、定位元素等等他們在同一父級 stacking context中的顯示順序是怎樣的？即stack level是怎樣的呢？比如一個塊級元素和內(nèi)聯(lián)元素發(fā)生層疊的話誰會在上面呢？是不是誰在后面誰就在上面呢？
　　根據(jù)w3c關(guān)于stack level的介紹可以得出以下stack level規(guī)則
　　每個stacking context都包括以下stack level （后來居上）:
　　父級stacking context的背景、邊界
　　z-index值為負值的定位元素（值越小越在下）
　　文本流中非定位的、block塊級子元素
　　文本流中非定位的、float浮動子元素
　　仿佛能產(chǎn)生stacking context的inline元素
　　否則，inline元素的stack level將在block元素之前。
　　z-index：auto/0的定位元素
　　z-index值為正的定位元素（值越大越在上）
以上stack level在瀏覽器執(zhí)行情況：
　　firefox3.0下測試完全吻合，firefox2.0下稍有不同即：“z-index值為負值的定位元素”在“父級stacking context的背景、邊界”之前。
　　ie6.0和7.0中：inline元素的stack level位于block元素之前，且“文本流中非定位的、float浮動子元素”（以下簡稱浮動元素）和“文本流中非定位的、block塊級子元素”（以下簡稱block元素）處于同一級。
FF下測試
測試頁面：　01.html（請分別在FF3.0和FF2.0中打開）
代碼說明：
　　由前所述，如果元素的stack level同級則后來居上；元素的stack level高，這無論代碼在文檔中位置如何都顯示在上面，即使代碼在最前面；如果元素的stack level低，無論代碼位置如何都將顯示在下面，即使代碼在最后面。
　　我們就根據(jù)這一點，以“3.文本流中非定位的、block塊級子元素”和“4.文本流中非定位的、float浮動子元素”為例，如果我把“float元素” 的代碼寫在“block元素”的前面，且實際顯示為：“float元素”在“block元素”之上。即可證明："float元素”的stack level級別較“block元素”高。因為如果同級,或者“block元素”的stack level高都應是“block元素”顯示在上。
　　根據(jù)以上，根據(jù)標準中的順序，把stack level高的元素代碼寫在前面，stack level低的代碼寫在后面，如果顯示結(jié)果是：代碼在前面的元素顯示在上方 ，即證明上面的stack level規(guī)則。
測試結(jié)果：
　　在FF3.0中結(jié)果和標準順序一致。FF2.0中“z-index值為負值的定位元素”在父級stacking context的背景下面。（注意ff2.0的這個特殊性）
IE下測試
測試頁面：　2.html (請在IE下瀏覽)
代碼說明：
　　此代碼也是根據(jù)上面的測試思想，但由于inline元素在ie中的特殊性，把inline的代碼寫在了后面，事實證明結(jié)論是正確的。對于“block元素”和“float元素”順序大家可以交換順序測試。
測試結(jié)論：
　　IE下（無論ie6.0或者ie7.0）“float元素”和“block元素”屬同一stack level，而“inline元素”較其stack level低。
解釋說明：
了　“float元素”，“z-index：auto的定位元素”仿佛產(chǎn)生了新的stacking context，但其真正能產(chǎn)生新的stacking context的后代任按其父級stacking context定位。（但IE中“z-index：auto的定位元素”
會擁有z-index值0，產(chǎn)生一個新的stacking context，并影響其子元素定位。這是IE一個BUG）
inline元素在FF中仿佛能產(chǎn)生新的stacking context，而在IE中則不能。
　　至此stack level規(guī)則內(nèi)容已經(jīng)完畢，現(xiàn)在應該能理解stack level和z-index的不同。stack level來決定這一個stacking context中各元素在z軸上的顯示順序，對于同一stack level的定位元素才由z-index進一步?jīng)Q定顯示次序。
一些問題的解釋
懌飛版主在《z-index在IE中的迷惑》一文中最后提到的問題：
演示地址：　3.html
認為：
解惑：IE瀏覽器似乎給body元素默認了一個相對定位屬性（position: relative）。
真是這樣嗎？
演示地址：　4.html
分析：
　　box1顯示在body的下方，根據(jù)上面的stack level規(guī)則，IE中，如果body默認了一個位置屬性，即body是其父級stacking context，box1應顯示在其上方，事實卻不是這樣。而且當我們給body加上position：relative以后，顯示效果和stack level規(guī)則一致。所以body并沒有默認位置屬性。
　　那為什么負值的定位元素在IE和FF下顯示不一致呢？
　　ie 中根據(jù)stack level規(guī)則： z-index為負的定位元素的stack level比父級stacking context（此處是root stacking context）高，顯示在其上方。故box1在ie中能顯示。ff3.0和標準一致，也能顯示。大家可以試一下。
　　ff2.0 中由于那條特殊的stack level，即 z-index為負的定位元素的stack level比父級stacking context（此處是root stacking context）低，所以顯示在root stacking context下方。故不能看見。
　　另外，上面的代碼中加上opacity那條后，在ff2.0中即可顯示了。這又是什么原因呢？
　　推測：在火狐中如果給元素設置opacity屬性（1除外），即會產(chǎn)生新的stacking context。
　　上面加上opacity屬性后在ff2.0中可顯示box1在body下，ff3.0box1在body上，（可以根據(jù)上面的stack level規(guī)則自己分析）符合推測。
在w3c的說明中也證明這點
In future levels of CSS, other properties may
introduce stacking contexts, for example 'opacity'
[CSS3COLOR].
總結(jié)：
　　在一個stacking context中元素的z-軸顯示順序，由元素所處的 stack level 決定。對于同一stack level的定位元素由z-index的大小進一步?jīng)Q定顯示次序。
　　ie中給元素設置position屬性（static除外）可產(chǎn)生新的stacking context
　　ff中給元素設置opacity屬性（1除外）可產(chǎn)生新的stacking context
　　除此之外（也許設置其他屬性也會產(chǎn)生新的stacking context，但還不知道）只有定位元素設置了z-index(auto除外)才會產(chǎn)生新的stacking context，子元素將按照新的stacking context，定位。

最新評論