在确定相对定位元素位置的时候,首先要确定元素的原始位置,即元素在文档中的位置。然后根据边偏移属性中定义的偏移值,确定元素的最终位置。
范例:一个在元素中使用相对定位属性的实例
其代码如下所示:
<!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。在第二个元素中,定义元素定位属性值为相对定位,同时定义了元素的大小和背景等属性。从图中可以看出,使用相对定位的元素按照自身所在的位置进行偏移。