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

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

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

測試
FF下測試
運(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="這是一個在火狐中測試層疊級別（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 在火狐中的測試</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">這個box position:relative;z-index:1;定位元素z-index值為正 </div>

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

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

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

<br /><br /><br /><br /><br /><br />未定位的浮動元素</div>

<div id="box-block">----這個box block;未定位的塊級元素</div>

<div id="box-p-zn">這個box z-index:-1;定位元素z-index值為負(fù)</div>

<!-

調(diào)試之用

-->

</div>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
測試頁面：
http://rong179.blogbus.com/files/12163574750.html（請分別在FF3.0和FF2.0中打開）
代碼說明：
由前所述，如果元素的stack level同級則后來居上；元素的stack level高，這無論代碼在文檔中位置如何都顯示在上面，即使代碼在最前面；如果元素的stack level低，無論代碼位置如何都將顯示在下面，即使代碼在最后面。
我們就根據(jù)這一點(diǎn)，以“3.文本流中非定位的、block塊級子元素”和“4.文本流中非定位的、float浮動子元素”為例，如果我把“float元素” 的代碼寫在“block元素”的前面，且實(shí)際顯示為：“float元素”在“block元素”之上。即可證明："float元素”的stack level級別較“block元素”高。因?yàn)槿绻?或者“block元素”的stack level高都應(yīng)是“block元素”顯示在上。
根據(jù)以上，根據(jù)標(biāo)準(zhǔn)中的順序，把stack level高的元素代碼寫在前面，stack level低的代碼寫在后面，如果顯示結(jié)果是：代碼在前面的元素顯示在上方，即證明上面的stack level規(guī)則。
測試結(jié)果：

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

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

相關(guān)文章

最新評論

文章分類

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

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