CSS教程:網(wǎng)頁布局定位及z-index解釋

2024-07-11 08:21:17

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

聲明

定位元素：
position屬性值設(shè)置除默認(rèn)值static以外的元素，包括relative，absolute，fixed。
平臺(tái)：win/ie win/ff

z-index

用來確定定位元素在垂直于顯示屏方向（以下稱為z軸）上的層疊順序

值：auto | 整數(shù) | inherit
默認(rèn)：auto
適用于：定位元素
繼承性：no

理解stacking context

每個(gè)box都?xì)w屬于一個(gè)stacking context,它是元素在z軸方向上定位的參考。根元素形成 root stacking context，其他stacking context由定位元素設(shè)置z-index為非auto時(shí)產(chǎn)生。如#div1{position:relative;z-index:0;}即可使 id=div1的元素產(chǎn)生stacking context。stacking context和 containing block 并沒有必然聯(lián)系。

理解stack level

在一個(gè)stacking context中的每個(gè)box，都有一個(gè)stack level（即層疊級(jí)別，以下統(tǒng)一用stack level），它決定著在同一stacking context中每個(gè)box在z軸上的顯示順序。同一stacking context中，stack level值大的顯示在上，stack level值小的顯示在下，同一stack level的遵循后來居上的原則（back-to-front ）。不同stacking context中，元素顯示順序以父級(jí)的stacking context的stack level來決定顯示的先后情況。于自身stack level無關(guān)。注意stack level和z-index并不是統(tǒng)一概念。（將在后文慢慢理解）

stack level規(guī)則

每個(gè)stacking context中可包含塊級(jí)（block）元素、內(nèi)聯(lián)（行內(nèi)inline）元素，還有設(shè)置float屬性的元素、定位元素等等他們?cè)谕桓讣?jí) stacking context中的顯示順序是怎樣的？即stack level是怎樣的呢？比如一個(gè)塊級(jí)元素和內(nèi)聯(lián)元素發(fā)生層疊的話誰會(huì)在上面呢？是不是誰在后面誰就在上面呢？

根據(jù)w3c關(guān)于 stack level 的介紹可以得出以下stack level規(guī)則

每個(gè)stacking context都包括以下stack level （后來居上）：

父級(jí)stacking context的背景、邊界
z-index值為負(fù)值的定位元素（值越小越在下）
文本流中非定位的、block塊級(jí)子元素
文本流中非定位的、float浮動(dòng)子元素
仿佛能產(chǎn)生stacking context的inline元素
否則，inline元素的stack level將在block元素之前。
z-index：auto/0的定位元素
z-index值為正的定位元素（值越大越在上）

以上stack level在瀏覽器執(zhí)行情況：

firefox3.0下測(cè)試完全吻合，firefox2.0下稍有不同即：“z-index值為負(fù)值的定位元素”在“父級(jí)stacking context的背景、邊界”之前。
ie6.0和7.0中：inline元素的stack level位于block元素之前，且“文本流中非定位的、float浮動(dòng)子元素”（以下簡(jiǎn)稱浮動(dòng)元素）和“文本流中非定位的、block塊級(jí)子元素”（以下簡(jiǎn)稱block元素）處于同一級(jí)。

|||

測(cè)試

ff下測(cè)試

運(yùn)行代碼框
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><meta name="keywords" content="z-index,ie,firefox,stacking context,stack level" /><meta http-equiv="description" content="這是一個(gè)在火狐中測(cè)試層疊級(jí)別（stack level)的頁面" /><meta content="all" name="robots" /><meta name="author" content="rong179，rong179@yahoo.cn" /><meta name="copyright" content="http://rong179.blogbus.com" /><title>stack level 在火狐中的測(cè)試</title><style type="text/css" media="all">#container {position:relative;left:100px;z-index:0;background: purple;width:500px;}#container div {height:200px;width:200px;}#box-p-zn { position:relative;z-index:-1;background-color:yellow; top:-25px;left:-30px;}#box-block {background-color: aliceblue;margin-top:-30px;margin-left:150px;}#box-float {float:left;margin:-50px 100px 0 0;background-color: red;}#box-inline {background-color: gray;display:inline;padding:50px 0;}#box-p-za { position: absolute; top:50px;left:50px; background-color: green;}#box-p-zp { position: relative;z-index:1;background-color: greenyellow;}</style></head><body><div id="container"><div id="box-p-zp">這個(gè)box position:relative;z-index:1;定位元素z-index值為正 </div><div id="box-p-za">這個(gè)box position:absolute;z-index:auto;定位元素z-index值auto</div><div id="box-inline">這個(gè)box inline;<br />inline元素</div><div id="box-float">這個(gè)box float;<br /><br /><br /><br /><br /><br />未定位的浮動(dòng)元素</div><div id="box-block">----這個(gè)box block;未定位的塊級(jí)元素</div><div id="box-p-zn">這個(gè)box z-index:-1;定位元素z-index值為負(fù)</div><!-調(diào)試之用--></div></body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

測(cè)試頁面：
http://rong179.blogbus.com/files/12163574750.html（請(qǐng)分別在ff3.0和ff2.0中打開）

代碼說明：

由前所述，如果元素的stack level同級(jí)則后來居上；元素的stack level高，這無論代碼在文檔中位置如何都顯示在上面，即使代碼在最前面；如果元素的stack level低，無論代碼位置如何都將顯示在下面，即使代碼在最后面。

我們就根據(jù)這一點(diǎn)，以“3.文本流中非定位的、block塊級(jí)子元素”和“4.文本流中非定位的、float浮動(dòng)子元素”為例，如果我把“float元素” 的代碼寫在“block元素”的前面，且實(shí)際顯示為：“float元素”在“block元素”之上。即可證明："float元素”的stack level級(jí)別較“block元素”高。因?yàn)槿绻?jí),或者“block元素”的stack level高都應(yīng)是“block元素”顯示在上。

根據(jù)以上，根據(jù)標(biāo)準(zhǔn)中的順序，把stack level高的元素代碼寫在前面，stack level低的代碼寫在后面，如果顯示結(jié)果是：代碼在前面的元素顯示在上方，即證明上面的stack level規(guī)則。

測(cè)試結(jié)果：

|||

一些問題的解釋：

懌飛版主在《z-index在ie中的迷惑》一文中最后提到的問題：

演示地址：
http://rong179.blogbus.com/files/12163573190.html

認(rèn)為：
解惑：ie瀏覽器似乎給body元素默認(rèn)了一個(gè)相對(duì)定位屬性（position: relative）。

真是這樣嗎？

演示地址：
http://rong179.blogbus.com/files/12163572440.html

分析

box1顯示在body的下方，根據(jù)上面的stack level規(guī)則，ie中，如果body默認(rèn)了一個(gè)位置屬性，即body是其父級(jí)stacking context，box1應(yīng)顯示在其上方，事實(shí)卻不是這樣。而且當(dāng)我們給body加上position：relative以后，顯示效果和stack level規(guī)則一致。所以body并沒有默認(rèn)位置屬性。

那為什么負(fù)值的定位元素在ie和ff下顯示不一致呢？

ie 中根據(jù)stack level規(guī)則： z-index為負(fù)的定位元素的stack level比父級(jí)stacking context（此處是root stacking context）高，顯示在其上方。故box1在ie中能顯示。ff3.0和標(biāo)準(zhǔn)一致，也能顯示。大家可以試一下。

ff2.0 中由于那條特殊的stack level，即 z-index為負(fù)的定位元素的stack level比父級(jí)stacking context（此處是root stacking context）低，所以顯示在root stacking context下方。故不能看見。

另外，上面的代碼中加上opacity那條后，在ff2.0中即可顯示了。這又是什么原因呢？

推測(cè)：在火狐中如果給元素設(shè)置opacity屬性（1除外），即會(huì)產(chǎn)生新的stacking context。

上面加上opacity屬性后在ff2.0中可顯示box1在body下，ff3.0box1在body上，（可以根據(jù)上面的stack level規(guī)則自己分析）符合推測(cè)。
在w3c的說明中也證明這點(diǎn)

in future levels of css, other properties may
introduce stacking contexts, for example 'opacity'
[css3color].

總結(jié)：

在一個(gè)stacking context中元素的z-軸顯示順序，由元素所處的 stack level 決定。對(duì)于同一stack level的定位元素由z-index的大小進(jìn)一步?jīng)Q定顯示次序。

ie中給元素設(shè)置position屬性（static除外）可產(chǎn)生新的stacking context
ff中給元素設(shè)置opacity屬性（1除外）可產(chǎn)生新的stacking context

除此之外（也許設(shè)置其他屬性也會(huì)產(chǎn)生新的stacking context，但還不知道）只有定位元素設(shè)置了z-index(auto除外)才會(huì)產(chǎn)生新的stacking context，子元素將按照新的stacking context，定位。

在ff3.0中結(jié)果和標(biāo)準(zhǔn)順序一致。ff2.0中“z-index值為負(fù)值的定位元素”在父級(jí)stacking context的背景下面。（注意ff2.0的這個(gè)特殊性）

ie下測(cè)試

運(yùn)行代碼框
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><meta name="keywords" content="z-index,ie,firefox,stacking context,stack level" /><meta http-equiv="description" content="這是一個(gè)在ie中測(cè)試層疊級(jí)別（stack level)的頁面" /><meta content="all" name="robots" /><meta name="author" content="rong179，rong179@yahoo.cn" /><meta name="copyright" content="http://rong179.blogbus.com" /><title>stack level 在ie中的測(cè)試</title><style type="text/css" media="all">#container {position:relative;z-index:0;background: purple;width:400px;}#container div {height:200px;width:200px;}#box-p-zn { position:relative;z-index:-1;background-color:yellow; top:-95px;left:55px;}#box-block {background-color: aliceblue;margin-top:-170px;margin-left:30px;}#box-float {float:left;margin:-50px 0px 0 35px;background-color: red;}#box-inline {background-color: gray;display:inline;padding:50px 0;margin-left:-10px;}#box-p-za { position: absolute; top:50px;left:50px; background-color: green;}#box-p-zp { position: relative;background-color: greenyellow;z-index:1;}</style></head><body><div id="container"><div id="box-p-zp">這個(gè)box position:relative;z-index:1; </div><div id="box-p-za">這個(gè)box position:absolute;z-index:auto;</div><div id="box-float">這個(gè)box float</div><div id="box-block"><br /><br /><br /><br />這個(gè)box block</div><div id="box-inline">這個(gè)box inline;</div><div id="box-p-zn"><br /><br /><br /><br /><br />這個(gè)box z-index:-1;</div></div></body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

測(cè)試頁面：
http://rong179.blogbus.com/files/12163574751.html(請(qǐng)?jiān)趇e下瀏覽)

代碼說明：

此代碼也是根據(jù)上面的測(cè)試思想，但由于inline元素在ie中的特殊性，把inline的代碼寫在了后面，事實(shí)證明結(jié)論是正確的。對(duì)于“block元素”和“float元素”順序大家可以交換順序測(cè)試。

測(cè)試結(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的后代任按其父級(jí)stacking context定位。（但ie中“z-index：auto的定位元素”
會(huì)擁有z-index值0，產(chǎn)生一個(gè)新的stacking context，并影響其子元素定位。這是ie一個(gè)bug）
inline元素在ff中仿佛能產(chǎn)生新的stacking context，而在ie中則不能。

至此stack level規(guī)則內(nèi)容已經(jīng)完畢，現(xiàn)在應(yīng)該能理解stack level和z-index的不同。stack level來決定這一個(gè)stacking context中各元素在z軸上的顯示順序，對(duì)于同一stack level的定位元素才由z-index進(jìn)一步?jīng)Q定顯示次序。

上一篇：學(xué)習(xí)css需要什么軟件

下一篇：CSS教程:容器定位