CSS網頁中的相對定位與絕對位置

css|網頁

在CSS中有這樣的一個指令：（position）

在DW中文版中翻譯為“定位”，常用的屬性有relative（相對）與 absolute（絕對）。

有很多朋友對這條指令的用法還是不清楚，這裡做一定細緻的講解：

position:relative; 表示相對定位，被定位了這個屬性的標籤在所屬的範圍內可以進行上下左右的移，這裡的移動與padding或是margin所產生的位置變化是不一樣的。padding與margin是元素本身的一種邊距與填充距離並不是真正的移動，而被定義為relative的元素是真正的移動，這所產生的移動距離是從margin的外圍到父級標籤內側之間這一段。

position:absolute; 表示絕對位置，如果定義了這個屬性的元素，其位置將依據瀏覽器左上方的0點開始計算，並且是浮動正常元素之上的。那麼當你需要某個元素定位在瀏覽器內容區的某個地方就可以用到這個屬性。

那麼有個問題產生了，現在大家做的網頁大部分是置中的，那麼我需要這個元素跟著網頁中的某個元素位置不論解析度是多少他的位置始終是針對頁內的某個元素的，那麼單純的absolute是不行的。

正確的解決方案就是在元素的父級元素定義為position:relative;（更正：這裡可以是祖父級，也可以是position:absolute;，多謝謝old9的提出）需要絕對位置的元素設為position:absolute;

這樣再設定top,right,bottom,left的值就可以了，這樣其定位的參照標準就是父級的左上方padding的左上側！