CSS中Position和Z-index
[ 2007-09-07 09:06:24 | 作者: admin ]
position
有四个不同的值，分别为：static | absolute | fixed | relative。在苏昱的《CSS2中文手册》中是这样解释的：static:无特殊定位，对象遵循HTML定位规则； absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框； relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置； fixed:IE5.5及NS6尚不支持此属性。
Z-INDEX
这是层的“Y坐标”值，就像在一个空间里，网页是x-y 平面 （底面），空间中层有它的坐标，从上往下看，前面的挡住后面的（默认：坐标值大的挡住坐标值小的） ,是改变对象的层叠位置的一个CSS属性：z-index。但是这个z-index并非是无所不能的，他受到了HTML代码等级的制约。z-index只能在同等级的HTML上体现他的作用。这里需要声明的是z-index只有在对象的position值为relative/absolute时才可以使用。
评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=982
有四个不同的值，分别为：static | absolute | fixed | relative。在苏昱的《CSS2中文手册》中是这样解释的：static:无特殊定位，对象遵循HTML定位规则； absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框； relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置； fixed:IE5.5及NS6尚不支持此属性。
Z-INDEX
这是层的“Y坐标”值，就像在一个空间里，网页是x-y 平面 （底面），空间中层有它的坐标，从上往下看，前面的挡住后面的（默认：坐标值大的挡住坐标值小的） ,是改变对象的层叠位置的一个CSS属性：z-index。但是这个z-index并非是无所不能的，他受到了HTML代码等级的制约。z-index只能在同等级的HTML上体现他的作用。这里需要声明的是z-index只有在对象的position值为relative/absolute时才可以使用。
引用
<!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>
<title>DivTest</title>
<style type="text/css">
body{margin:0px;padding:0px;}
#layer_01{z-index:0;width:400px;height:300px;border:10px #69f solid;padding:0px;margin:10px;left:0px;top:0px;position:absolute;background-color:#fff;}
#layer_02{z-index:1;width:400px;height:300px;border:10px #F90 solid;padding:0px;margin:10px;left:50px;top:50px;position:absolute;background-color:#fff;}
#layer_03{z-index:2;width:400px;height:300px;border:10px #369 solid;padding:0px;margin:10px;left:100px;top:100px;position:absolute;}
#layer_04{z-index:3;width:400px;height:300px;border:10px #f00 solid;padding:0px;margin:10px;left:150px;top:150px;position:absolute;}
#layer_05{z-index:4;width:400px;height:300px;border:10px #ff0 solid;padding:0px;margin:10px;left:450px;top:150px;position:static}/*注意此处的left,top等属性无效。*/
#layer_06{z-index:5;width:400px;height:300px;border:10px #036 solid;padding:0px;margin:10px;left:250px;top:150px;position:relative;right:100px;}
</style>
</head>
<body>
<div id="layer_01">First Layer</div>
<div id="layer_02">Second Layer</div>
<div id="layer_03">Third Layer</div>
<div id="layer_04">Fourth Layer</div>
<div id="layer_05">fifth Layer</div>
<div id="layer_06">Sixth Layer</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DivTest</title>
<style type="text/css">
body{margin:0px;padding:0px;}
#layer_01{z-index:0;width:400px;height:300px;border:10px #69f solid;padding:0px;margin:10px;left:0px;top:0px;position:absolute;background-color:#fff;}
#layer_02{z-index:1;width:400px;height:300px;border:10px #F90 solid;padding:0px;margin:10px;left:50px;top:50px;position:absolute;background-color:#fff;}
#layer_03{z-index:2;width:400px;height:300px;border:10px #369 solid;padding:0px;margin:10px;left:100px;top:100px;position:absolute;}
#layer_04{z-index:3;width:400px;height:300px;border:10px #f00 solid;padding:0px;margin:10px;left:150px;top:150px;position:absolute;}
#layer_05{z-index:4;width:400px;height:300px;border:10px #ff0 solid;padding:0px;margin:10px;left:450px;top:150px;position:static}/*注意此处的left,top等属性无效。*/
#layer_06{z-index:5;width:400px;height:300px;border:10px #036 solid;padding:0px;margin:10px;left:250px;top:150px;position:relative;right:100px;}
</style>
</head>
<body>
<div id="layer_01">First Layer</div>
<div id="layer_02">Second Layer</div>
<div id="layer_03">Third Layer</div>
<div id="layer_04">Fourth Layer</div>
<div id="layer_05">fifth Layer</div>
<div id="layer_06">Sixth Layer</div>
</body>
</html>
[最后修改由 admin， 于 2007-09-07 09:10:03]
评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=982
这篇日志没有评论。
此日志不可发表评论。
