position屬性的relative以及absolute的區別是什麽？

任何元素的默認position的屬性值都為static（靜態），但我們在布局的時候也會經常用到relative（相對）以及absolute（絕對）這兩種屬性。

再分別介紹兩種屬性之前，我們一定要記住一個重要結論：如果用position來進行布局，父級元素的position屬性必須為relative，而定位於父級內部某個位置的元素，最好用absolute，因為它不受父級元素padding的屬性影響，當然也可以用relative，不過到時候計算的時候不要忘記padding的值。

【absolute：絕對定位】
默認參照瀏覽器左上角，配合TOP、RIGHT、BOTTOM、LEFT（以下簡稱TRBL）進行定位，具有以下屬性：
（1）無TRBL的情況下，參照父級左上角；無父級，參照瀏覽器左上角；無父級元素，但存在文本，參照最後最後一個文字的右上角為原點但是不斷開文字，覆蓋與上方。
（2）如果設定TRBL，並且父級沒有position屬性（不論是absolute還是relative），都是默認以瀏覽器左上角開始定位，位置由TRBL決定。
（3）如果設定TRBL，並且父級有position屬性（不論是absolute還是relative），默認以父級左上角為原點開始定位，位置由TRBL決定。
以上三點我們就可以總結出：若想使用absolute進行定位，那我們就要明確兩點：
第一：設定TRBL

第二：父級設定position屬性

【relative：相對定位】
默認參照父級原始點為原始點；如果無父級，以文本的上一個元素的底部為原始點，配合TRBL進行定位；當父級內有padding屬性時，參照父級內容區的原始點進行定位。
（1）不存在TRBL，參照父級左上角；沒有腹肌，參照瀏覽器左上角；沒有腹肌元素，但是存在文本，則以文本的底部為原始點進行定位並將文字斷開。
（2）設定TRBL，並且父級沒有設定position屬性，以父級左上角為原點進行定位
（3）設定TRBL，並且父級設定position屬性，以父級左上角為原點進行定位，但是如果父級有padding屬性，那麽以內容區域的左上角為原點進行定位。

綜上所述，relative均以父級左上角進行定位，但是受padding的影響。

這樣，我們就可以得知為什麽要選用relative定位父級元素，absolute定位內部元素。因為我們布局時用relative後，就不只是用float布局頁面了，還可以用TRBL進行布局。但是如果用absolute來布局頁面，搜有的DIV都相對於瀏覽器的左上角定位，這樣適配性會大大下降，用戶體驗度很低。所以只能用與將某個元素定位於屬性為absolute的元素的內部的某個位置。學習web前端課程www.zhihaijiangku.com

Web前端基礎（CSS position的正確用法）