absolute 與 relative 的運用

div css 進行網頁布局，適當地運用 absolute 與 relative，能給布局帶來意想不到的效果和方便，達到事半功倍，最近在有一篇關於 absolute 與 relative 的運用的文章，但講解不全面，不容易讀懂。下面我嘗試寫下一些我的看法，希望對你有幫助…

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

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

上面的圖不是**的，是在看完**的部落格後自己畫的，如果有畫的不對的地方，希望您指出。