CSS中position屬性三大定位方式講解

Relative

Relative的元素相對於它本來的位置來作定位，但在文檔流中依然保持着原有的默認位置，即便它做了偏移，周圍的元素也不會佔領的它的位置。

若是一個元素是相對定位（甚至它還作了偏移），它周圍的元素在排版時參考的依然是那個元素本來的位置（指在沒有偏移時的位置）。

若是同時聲明top和bottom的值，那麼top值的優先級更高。若是同時聲明left和right的值，那麼優先級取決於網頁的語言（例如，英語法語德語西班牙語）。好比，在英語的網頁中，left的優先級更高；在阿拉伯語的網頁中，right的優先級更高。

 

Absolute

絕對定位的元素將脫離文檔流。即在排版中，絕對定位的元素再也不佔有它原來的位置，後面的元素將佔領它本來的位置。

絕對定位的元素根據它的相對定位（Relative）的父節點的位置定位。若是它沒有相對定位的父節點，則直接參考body容器定位。

對絕對定位的元素使用偏移量屬性，這個元素將以相對定位的父節點做爲參考系進行偏移。若是沒有對絕對定位的元素使用偏移量屬性，那麼該元素將被放置在父節點的左上角。

若是隻設置了top屬性，那麼該元素則只作垂直方向的偏移，而水平方向依然靠着父節點的最左邊。

一、若是絕對定位的元素有固定的height和width值：

若是同時聲明top和bottom的值，那麼top值的優先級更高。若是同時聲明left和right的值，那麼優先級取決於網頁的語言（例如，英語法語德語西班牙語）。好比，在英語的網頁中，left的優先級更高；在阿拉伯語的網頁中，right的優先級更高。

二、若是絕對定位的元素沒有固定的height或者width值：

（1）若是元素並無固定height值，但是卻同時有top和bottom的值，那麼該元素將橫跨除了top和bottom以外剩下的全部高度。
（2）若是元素並無固定width值，但是同時有left和right的值，那麼該元素將橫跨除了left和right以外剩下的全部寬度。
（3）若是元素既沒有固定height和width值，卻同時有top, bottom, left, right值，那麼該元素將佔據除了四條邊距離以外的全部空間。

 

Fixed

固定定位的元素跟絕對定位的元素很類似，只不過它參照的座標系是瀏覽器的視口(viewport)。固定定位的元素不隨着頁面滾動而移動，它會始終保持在那個位置。另外，在IE6中使用固定定位有一個BUG，須要使用一些hack來解決。

 

行內元素設置positon屬性後的變化

relative : 不會改變元素的Display屬性，原來是什麼類型的依舊是什麼類型。
absolute | fixed ：行內元素將被重置爲塊級元素。例如：

<span style="position:absolute; width:100px; height:50px;">span</span>

這是徹底正確的。

<span style="position:absolute; display:block; width:100px; height:100px;">span</span>

這裏的display:block是多餘的。

 

position 與 float

一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流(這是本身起的名字，呵呵)」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。

------------------

【參考資料】

1. 關於CSS中的float和position
2. CSS中的Position屬性
3. 對CSS中的Position、Float屬性的一些深刻探討