<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS相对定位</title>
<style type="text/css">
*{margin: 0px;
padding:0px;}
#all{width:400px;
height:400px;
background-color:#ccc;}
#fixed{width:100px;
height:80px;
border:15px ridge #f00;
background-color:#9c9;
position:relative;
top:20px;
/* left:200px;*/}
#a,#b{width:200px;
height:120px;
background-color:#eee;
border:2px outset #000;}
</style></head>
<body>
<div id="all">
<div id="a">第1个无定位的div容器</div>
<div id="fixed">相对定位的容器</div>
<div id="b">第2个无定位的div容器</div>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS相对定位</title>
<style type="text/css">
*{margin: 0px;
padding:0px;}
#all{width:400px;
height:400px;
background-color:#ccc;}
#fixed{width:100px;
height:80px;
border:15px ridge #f00;
background-color:#9c9;
position:relative;
top:20px;
/* left:200px;*/}
#a,#b{width:200px;
height:120px;
background-color:#eee;
border:2px outset #000;}
</style></head>
<body>
<div id="all">
<div id="a">第1个无定位的div容器</div>
<div id="fixed">相对定位的容器</div>
<div id="b">第2个无定位的div容器</div>
</div>
</body>
</html>
当容器的position属性值为relative时，这个容器即被相对定位了。相对定位和其他定位相似，也是独立出来浮在上面。不过相对定位的容器的top（顶部）、bottom（底部）、left（左边）和right（右边）属性参照对象是其父容器的4条边，而不是浏览器窗口，其中如果父容器中还包含其他的容器(如<div id=a ></div>)放在了相对定位容器的前面，那么相对定位将参考排在其前面的容器进行相对定位；而如果<div id=a></div> 设置了float 属性，改容器就脱离了文档流，那么相对定位的容器，会当成<div id=a></div>不存在样，根据父容器<div id='a'></div> 进行定位。并且相对定位的容器浮上来后，其所占的位置仍然留有空位，后面的无定位容器仍然不会“挤”上来。
