詳細說明兩者的關係，需配合例子，請先看例子：
以下是引用片段：
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Div CSS Example, Wayhome's BlogBR style type="text/css"> <br><!-- <BR>body,td,th{font-family:Verdana;font-size:9px;} <BR>--> <br> <br>
top: 5px;
right: 20px;
position: absolute;
left: 20px;
bottom: 10px;
top: 5px;
left: 5px;
position: relative;
left:㠀150pxrelative;
left : 300px; height: 50px;
1
2
3 p>
4
5
position; height:100px; background: 0000;">position; span>;
bodyposition:
relative跨度>;
左：200px;
寬度：300px;
高度：300px;
位置：absolute;
top:20px;
右：20px;
位置：絕對;
底部：20px;
左：20px;
div>
>
絕對：絕對定位，CSS寫法「position:absolute; ”，它的定位分兩種情況，如下：
1.沒有設定上、右、下、左的情況，默認引用父級的“內容區域原始點”為原始點，上面例子紅色部分(黃色父級區域有Padding 屬性，「座標原始點」和「內容區域原始點」不一樣)。
二、有設定上、右、下、左的情況，這裡又分為以下兩種情況：
(1).級父沒位置屬性，瀏覽器左上角（即Body）為「座標原始點」定位，位置由 Top、Right、Bottom、Left屬性決定，上面範例綠色部分。
相對：相對定位，CSS寫法“position:relative;” ”，參考父級的“內容區域原始點”為原始點，無父級則以Body 的“內容區域原始點”為原始點，位置由Top、Right、Bottom、Left 屬性決定，且有“撐開”
透過上面的例子和講解，相信善於運用絕對與相對並不是一件很困難的事，我們周圍有關於絕對與相對的明顯的事情好例子，比如“網易163免費郵”首頁(http://mail.163.com)，裡面存在大量的引用。
程式碼範例在IE5.5、IE6、FF1.5、Opera9測試通過。
