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

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

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

測(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é)果：

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

相關(guān)文章

最新評(píng)論

文章分類

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

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