css position屬性中：absolute與relative的區別

如果用 position來布局頁面，父級元素的position 屬性必須為relative，而定位於父級內部某個位置的元素，最好用absolute，因為它不受父級元素的padding 的屬性影響，當然你也可以用 position，不過到時候計算的時候不要忘記 padding 的值。”

任何元素的預設position 的屬性值均是static,靜態。今天51RGB Q群186242343主要講relative（相對）以及absolute（絕對）。

【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 的p 視成可以用TRBL 進行定位的的普通p，或者說只要將我們平時布局頁面的p 的CSS 屬性中加上position:relative 後，就不只是用float 布局頁面了，還可以用TRBL 進行布局頁面了，或者說加上position:relative 的p 也可以像普通的p 進行布局頁面了，只不過還可以用TRBL進行布局頁面。但是position 屬性為absolute 不可以用來布局頁面，因為如果用來布局的話，所有的p 都相對於瀏覽器的左上方定位了，所以只能用於將某個元素定位於屬性為absolute 的元素的內部某個位置，這樣我們就可以總結比較重要的結論既然屬性為absolute 的元素用來定位某元素在父級中位置，就少不了TRBL，這時候根據一開始講的absolute 的第三條，如果父級元素沒有
position 屬性那麼absolute 元素就會脫離父級元素，但是如果是布局頁面，父級元素position 的屬性又不能為absolute，不然就會以瀏覽器左上方為原點了，所以父級元素的position 屬性只能為relative！

屬性為relative 的元素可以用來布局頁面，屬性為absolute 的元素用來定位某元素在父級中的位置

總結：如果用position來布局頁面，父級元素的position屬性必須為relative，而定位於父級內部某個位置的元素，最好用absolute，因為它不受父級元素的padding的屬性影響，當然你也可以用position，不過到時候計算的時候不要忘記padding的值。
但是定位(position)有一個缺點，不會自適應內部元素的高度，所以平時我們在布局頁面的時候，如果某個或者某些模組高度永遠不變，就可以用定位，但是帆建議大家布局頁面的時候，還是要以Float 為主，Position 為輔！這樣你才能做出高品質的頁面。

最後，請大家記住我這句話:“布局頁面，Float為主 ，Position為輔！”