在确定相对定位元素位置的时候,首先要确定元素的原始位置,即元素在文档中的位置。然后根据边偏移属性中定义的偏移值,确定元素的最终位置。
范例:一个在元素中使用相对定位属性的实例
其代码如下所示:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css属性实例</title>
<style>
.div1{
 background:#333333;
 width:200px;
 height:100px;
 }
.relative{
 position:relative;
 top:50px;
 left:100px;
 width:400px;
 height:100px;
 background:#666666;}
</style>
</head>
 
<body>
 <div class="div1"></div>
 <div class="relative">这是相对定位的元素。</div>
</body>
</html>
   
 以上的代码中定义了两个元素,其中第一个元素中,定义元素的背景颜色属性值为深灰色,大小为200px*100px。在第二个元素中,定义元素定位属性值为相对定位,同时定义了元素的大小和背景等属性。从图中可以看出,使用相对定位的元素按照自身所在的位置进行偏移。

posted on 2011-09-29 09:57  箪箪汰郎  阅读(278)  评论(0编辑  收藏  举报