詳細講解兩者的關系，需要配合例子，請先看例子：

以下是引用片段：








　position: absolute;

　top: 5px;

　right: 20px;

　
position: absolute;

left: 20px;

bottom: 10px;




　position: absolute;

　top: 5px;

　left: 5px;



　position: relative;

　left: 150px;

　

　width: 300px; height: 50px;



　　
　

1

　

2

　

3

　

4

　

5

　
　　　 padding: 20px 0 0 20px;
　　position: absolute;
　　
　　　　position: relative;

　　 left: 200px;

　　

　　 width: 300px;

　　 height: 300px;

　　
　　　 position: absolute;

　　　 top: 20px;

　　　 right: 20px;

　　
　　　 position: absolute;

　　bottom: 20px;

　　left: 20px;

　　
　　
　
　

　　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 測試通過。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com