详细讲解两者的关系，需要配合例子，请先看例子：
以下是引用片段：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>Div+CSSExample,Wayhome'sBlog</title>
<styletype="text/css">
<>
</style></head>
<body>
<divstyle="position:absolute;top:5px;right:20px;width:200px;height:180px;background:#00FF00;">
position:absolute;<br/>
top:5px;<br/>
right:20px;<br/>
<divstyle="position:absolute;left:20px;bottom:10px;width:100px;height:100px;background:#00FFFF;">
position:absolute;<br/>
left:20px;<br/>
bottom:10px;<br/>
</div>
</div>
<divstyle="position:absolute;top:5px;left:5px;width:100px;height:100px;background:#00FF00;">
position:absolute;<br/>
top:5px;<br/>
left:5px;<br/>
</div>
<divstyle="position:relative;left:150px;width:300px;height:50px;background:#FF9933;">
position:relative;<br/>
left:150px;<br/>
<br/>
width:300px;height:50px;<br/>
</div>
<divstyle="text-align:center;background:#ccc;">
<divstyle="margin:0auto;width:600px;background:#FF66CC;text-align:left;">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<divstyle="padding:20px0020px;background:#FFFF00;">
padding:20px0020px;
<divstyle="position:absolute;width:100px;height:100px;background:#FF0000;">position:<spanstyle="color:#fff;">absolute</span>;</div>
<divstyle="position:relative;left:200px;width:500px;height:300px;background:#FF9933;">
position:<spanstyle="color:blue;">relative</span>;<br/>
left:200px;<br/>
<br/>
width:300px;<br/>
height:300px;<br/>
<divstyle="position:absolute;top:20px;right:20px;width:100px;height:100px;background:#00FFFF;">
position:absolute;<br/>
top:20px;<br/>
right:20px;<br/></div>
<divstyle="position:absolute;bottom:20px;left:20px;width:100px;height:100px;background:#00FFFF;">
position:absolute;<br/>
bottom:20px;<br/>
left:20px;<br/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
absolute：绝对定位，CSS写法“position:absolute;”，它的定位分两种情况，如下：
1.没有设定Top、Right、Bottom、Left的情况，默认依据父级的“内容区域原始点”为原始点，上面例子红色部分(父级黄色区域有Padding属性，“坐标原始点”和“内容区域原始点”不一样)。
2.有设定Top、Right、Bottom、Left的情况，这里又分了两种情况如下：
(1).父级没position属性，浏览器左上角(即Body)为“坐标原始点”进行定位，位置由Top、Right、Bottom、Left属性决定，上面例子绿色部分。
(2).父级有position属性，父级的“坐标原始点”为原始点，上面例子浅蓝色部分。
relative：相对定位，CSS写法“position:relative;”，参照父级的“内容区域原始点”为原始点，无父级则以Body的“内容区域原始点”为原始点，位置由Top、Right、Bottom、Left属性决定，且有“撑开或占据高度”的作用，上面例子橙色部分。
通过上面的例子和讲解，相信熟练运用absolute与relative并不是一件很困难的事，我们周围有不少关于absolute与relative的好例子，比如“网易163免费邮”首页(http://mail.163.com)，里面就有大量的运用。
例子代码在IE5.5、IE6、FF1.5、Opera9测试通过。
【Div CSS absolute与relative的区别小结】相关文章：