|
对象的定位属性有position、left、top、right、bottom、z-index六个。
1、position
它用于设置对象的定位方式，语法为：
position: static | absolute | fixed | relative
各个取值的意义如下：
● static：是默认值，无特殊定位，对象遵循HTML定位规则：第二个对象立即定位在前一个对象之后。
● absolute：定义对象的绝对位置。使用left、top、right、bottom等属性，相对于其直接上层对象进行绝对定位，而且必须指定这四个属性值中的至少一个，否则按static定位对象。如果不存在这样的父对象，则依据 对象进行定位，而其层次通过z-index属性定义。此时对象没有外补丁（margin），但仍有内补丁（padding）和边框（border）。
● fixed：定位遵从absolute方式，但是要遵守一些规范。最好不要用。
● relative：定义对象的相对位置。依据left、top、right、bottom等属性，它的位置根据前一个对象进行偏移。
2、left、top、right和bottom
left用于设置对象与其最近一个具有定位设置的父对象左边界的位置。与它类似，top、right、bottom用于设置对象与其最近一个具有定位设置的父对象上边界、右边界、下边界的位置。语法为：
left或top或right或bottom: auto | length
在这四个属性中，auto是默认值，无特殊定位，对象遵循HTML定位规则：第二个对象立即定位在前一个对象之后；length是具体的度量值，可以是百分数，也可以是负值。
3、z-index
设置对象的层叠顺序，语法为：
z-index: auto | number
auto是默认值，表示遵从其父对象的定位方式；number是无单位的整数值，一般在1～99之间，可以为负数。较大number值的对象会覆盖在较小number值的对象之上。
如果两个绝对定位对象的具有同样的z-index值，那么将依据它们在HTML文档中声明的顺序层叠。如果某对象未指定z-index值，则其他z-index值为正的对象会在它上面，z-index值为负的对象会在它下面。
此属性仅仅作用于position属性值为relative或absolute 的对象，它也不会对表单控件起作用。
【例26】定位属性的使用。
<html>
<head>
<title>itsway ---- 层的概念</title>
</head>
<body>
<div id = "layer1" style = "position: absolute; left: 5px; top: 5px;
width: 200px; height: 100px; background-image: url(cat1.jpg); z-index:1;"}>
</div>
<div id = "layer2" style = "position: relative; left:220px;
width: 150px; height: 50px; background-color:transparent; "}>
<p>layer2是透明层，以body定位</p>
</div>
<div id = "layer3" style = "position: fixed; left:120px; bottom:10px;
width: 200px; height: 200px; background-color:silver; z-index: 10;"}>
<div id = "layer4" style = "position: relative; left:10px; top:20px;
width: 150px; height: 50px; background-color:yellow; z-index: 11;"}>
<p>layer4在layer3中，以layer3相对定位</p>
</div>
<div id = "layer5" style = "position: relative; right: -10px; top: 10px;
width: 150px; height: 60px; background-color:yellow; z-index: 11;"}>
<p><font size = "2">layer5也在layer3中，左边以layer3相对定位，上边以layer4相对定位</font></p>
</div>
</div>
</body>
</html>
在IE中，本例显示结果如下图所示。
在Firefox、Opera、Netscape等浏览器中的显示结果如下图所示。
看来IE是有些特立独行，因为IE 6.0并不支持fixed定位方式，而且当缩放窗口时，layer3有时会被layer1所遮盖。因此，为了让层的显示在各种浏览器中都尽量一致，应少用position:fixed设置，多用position:absolute，还应该在多个浏览器中做试验。注意，layer3的position值是fixed，它距左边是120像素，距下边10像素，所以会随着窗口的缩放，始终“挺立”在页面下面。layer4是layer3中的层，所以定位方式以layer3为准。但layer5的定位方式有些怪异，笔者不明白为什么。
在本例中还使用了透明层的技巧。使用透明层，可以实现层的叠加。这样可以让一些内容漂浮在另一个内容的上方。
【例27】层的叠加。
<html>
<head>
<title>itsway ---- 透明层</title>
</head>
<body>
<table border = "1" width = "200">
<tr><td width = "100%">
<div id = "layer1" style = "position: relative; left: 0; top: 0;
width: 243px; height: 243px; background-color:transparent; z-index: 1;"}>
<img src = "cat1.jpg" border = "1"></div>
</td></tr>
</table>
<div id = "layer2" style = "position: absolute; left: 20px; top: 25px;
width: 40px; height: 100px; background-color:transparent; z-index: 11; "}>
<p align = "left"><b>一<br>只<br>神<br>猫<br></b></p>
</div>
</body>
</html>
在各浏览器中的显示结果大致如下图所示。
在本例中，图片是在层layer1中放置的，而layer1则放置在表格单元中。“一只神猫”几个字是放在layer2中的，layer2叠加在layer1上。
上一篇：20、层 下一篇：尚未做好
|
