css佈局的相對與絕對定位

【position:absolute】

意思是：他的意思是絕對定位，他默認參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，有如下屬性：

1)若是沒有TRBL，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角,若是在沒有父級元素的狀況下，存在文本，則以它前面

的最後一個文字的右上角爲原點進行定位可是不斷開文字，覆蓋於上方。

2)若是設定TRBL，而且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角爲原始點進行定位，位置將由TRBL決定。

3)若是設定TRBL，而且父級設定position屬性(不管是absolute仍是relative)，則以父級的左上角爲原點進行定位，位置由TRBL決定。即便父級有Padding屬性，對其也不起做用，說簡單點就是：它只堅持一點，就以父級左上角爲原點進行定位，父級的padding對其根本沒有影響。

以上三點能夠總結出，若想把一個定位屬性爲absolute的元素定位於其父級元素內，只有知足兩個條件，

第一：設定TRBL

第二：父級設定Position屬性

上面的這個總結很是重要，能夠保證你在用absolue佈局頁面的時候，不會錯位，而且隨着瀏覽器的大小或者顯示器分辨率的大小，而不發生改變。

只要有一點不知足，元素就會以瀏覽器左上角爲原點，這就是初學者容易犯錯的一點，已經定位好的板塊，當瀏覽器的大小改變，父級元素會隨之改變，可是設定Position屬性爲absolute的板塊和父級元素的位置發生改變，錯位了，這就是由於此時元素以瀏覽器的左上角爲原點的緣由。

初學者很容易犯錯，不清楚Position屬性爲absolute的板塊，若想定位到父級板塊中，而且當瀏覽器的大小改變或顯示器的分辨率改變，佈局不發生改變，是須要知足兩個條件的，只要有一點不知足，元素就會以瀏覽器左上角爲原點，從而致使頁面佈局錯位。

【position:relative】

意思是相對定位，他是默認參照父級的原始點爲原始點，無父級則以文本流的順序在上一個元素的底部爲原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位，有如下屬性：

1)若是沒有TRBL，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角(到這裏和absolute第一條同樣)，若是在沒有父級元素的狀況下，存在文本，則以文本的底部爲原始點進行定位並將文字斷開(和absolut不一樣)。

2)若是設定TRBL，而且父級沒有設定position屬性，仍舊以父級的左上角爲原點進行定位(和absolut不一樣)

3)若是設定TRBL，而且父級設定position屬性(不管是absolute仍是relative)，則以父級的左上角爲原點進行定位，位置由TRBL決定(前半段和absolut同樣)。若是父級有Padding屬性，那麼就之內容區域的左上角爲原點，進行定位(後半段和absolut不一樣)。

以上三點能夠總結出，不管父級存在不存在，不管有沒有TRBL，均是以父級的左上角進行定位，可是父級的Padding屬性會對其影響。

綜合上面對relative的敘述，咱們就能夠將position屬性爲relative的DIV視成能夠用TRBL進行定位的的普通DIV，或者說只要將咱們平時佈局頁面的div的CSS屬性中加上position:relative後，就不僅是用float佈局頁面了，還能夠用TRBL進行佈局頁面了，或者說加上position:relative的DIV也能夠像普通的DIV進行佈局頁面了，只不過還能夠用TRBL進行佈局頁面。可是position屬性爲absolute不能夠用來佈局頁面，由於若是用來佈局的話，全部的DIV都相對於瀏覽器的左上角定位了，因此只能用於將某個元素定位於屬性爲absolute的元素的內部某個位置，這樣咱們就能夠總結比較重要的結論

屬性爲relative的元素能夠用來佈局頁面，屬性爲absolute的元素用來定位某元素在父級中的位置

既然屬性爲absolute的元素用來定位某元素在父級中位置，就少不了TRBL，這時候根據一開始講的absolute的第三條，若是父級元素沒有position屬性那麼absolute元素就會脫離父級元素，可是若是是佈局頁面，父級元素position的屬性又不能爲absolute，否則就會以瀏覽器左上角爲原點了，因此父級元素的position屬性只能爲relative！

=============================================

總結：若是用position來佈局頁面，父級元素的position屬性必須爲relative，而定位於父級內部某個位置的元素，最好用absolute，由於它不受父級元素的padding的屬性影響，固然你也能夠用position，不過到時候計算的時候不要忘記padding的值。

=============================================

 

可是定位(position)有一個缺點，不會自適應內部元素的高度，因此平時咱們在佈局頁面的時候，若是某個或者某些模塊高度永遠不變，就能夠用定位，可是建議你們佈局頁面的時候，仍是要以Float爲主，Position爲輔！這樣你才能作出高質量的頁面。