CSS教程:网页布局定位及z-index解释

2008-10-17 19:25:37 佚名

测试
FF下测试
运行代码框

<!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值为负</div>

<!-

调试之用

-->

</div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
测试页面：
http://rong179.blogbus.com/files/12163574750.html（请分别在FF3.0和FF2.0中打开）
代码说明：
由前所述，如果元素的stack level同级则后来居上；元素的stack level高，这无论代码在文档中位置如何都显示在上面，即使代码在最前面；如果元素的stack level低，无论代码位置如何都将显示在下面，即使代码在最后面。
我们就根据这一点，以“3.文本流中非定位的、block块级子元素”和“4.文本流中非定位的、float浮动子元素”为例，如果我把“float元素” 的代码写在“block元素”的前面，且实际显示为：“float元素”在“block元素”之上。即可证明："float元素”的stack level级别较“block元素”高。因为如果同级,或者“block元素”的stack level高都应是“block元素”显示在上。
根据以上，根据标准中的顺序，把stack level高的元素代码写在前面，stack level低的代码写在后面，如果显示结果是：代码在前面的元素显示在上方，即证明上面的stack level规则。
测试结果：