在CSS中有這樣的一個指令:(position),在DreamWeaver中文版中翻譯為“定位”,常用的屬性有兩個: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的左上側