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

互聯(lián)網(wǎng) 發(fā)布時間：2008-10-17 19:25:37 作者：佚名

聲明定位元素： position屬性值設置除默認值static以外的元素，包括relative，absolute，fixed。平臺：win/IE win/FF z-index 用來確定定位元素在垂直于顯示屏方向（以下稱為Z軸）上的層疊順序值：auto | 整數(shù) | inherit 默認：auto 適用于：定位元素繼承性

一些問題的解釋：
懌飛版主在《z-index在IE中的迷惑》一文中最后提到的問題：
運行代碼框

<!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=utf-8" />

<meta name="Keywords" content="z-index,IE,迷惑" />

<meta http-equiv="Description" content="這是一個z-index在IE中的迷惑的演示" />

<meta content="all" name="robots" />

<meta name="author" content="blank,懌飛" />

<meta name="copyright" content="http://www.planabc.net" />

<title>z-index在IE中的迷惑</title>

<style type="text/css" media="all">

#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }

</style>

</head>

<body>

<div id="box1">為什么負值的定位元素在IE和FF下顯示不一致呢？Why？</div>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運行]
演示地址：
http://rong179.blogbus.com/files/12163573190.html
認為：
解惑：IE瀏覽器似乎給body元素默認了一個相對定位屬性（position: relative）。
真是這樣嗎？
運行代碼框

<!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=utf-8" />

<meta name="Keywords" content="z-index,IE,Firefox,stacking context,stack level" />

<meta http-equiv="Description" content="這是一個在IE中測試層疊級別（stack level)的頁面" />

<meta content="all" name="robots" />

<meta name="author" content="rong179，rong179@yahoo.cn" />

<meta name="copyright" content="http://rong179.blogbus.com" />

<title>body 是否默認有position屬性</title>

<head>

<style>

*{

margin:0;

}

html{

background:silver;

}

body{

height:200px;

width:200px;

background:green;

text-align:right;

/*ie中position:relative;加上這條試試*/

/*ff中opacity:0.99;加上這條試試*/

}

div{

position:absolute;

left:100px;

top:100px;

width:200px;

height:200px;

background:yellow;

z-index:-1;

}

</style>

</head>

<body>

BODY:<br />z-Index:0

<div>DIV:<br />z-Index:-1</div>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運行]
演示地址：
http://rong179.blogbus.com/files/12163572440.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，定位。

在FF3.0中結(jié)果和標準順序一致。FF2.0中“z-index值為負值的定位元素”在父級stacking context的背景下面。（注意ff2.0的這個特殊性）
IE下測試
運行代碼框

<!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="這是一個在IE中測試層疊級別（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中的測試</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">這個box position:relative;z-index:1; </div>

<div id="box-p-za">這個box position:absolute;z-index:auto;</div>

<div id="box-float">這個box float</div>

<div id="box-block"><br /><br /><br /><br />這個box block</div>

<!--請交換上面兩個元素的順序，再試試 -->

<div id="box-inline">這個box inline;</div>

<div id="box-p-zn"><br /><br /><br /><br /><br />這個box z-index:-1;</div>

<!--

調(diào)試之用

-->

</div>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運行]
測試頁面：
http://rong179.blogbus.com/files/12163574751.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定顯示次序。

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

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

相關文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容