【position:absolute】

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

? ? ? ? ?

如果沒有TRBL，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角,如果在沒有父級元素的情況下，存在文本，則以它前面的最后一個文字的右上角為原點進行定位但是不斷開文字，覆蓋于上方。

如果設定TRBL，并且父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。

如果設定TRBL，并且父級設定position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置由TRBL決定。即使父級有Padding屬性，對其也不起作用

以上三點可以總結出，若想把一個定位屬性為absolute的元素定位于其父級元素內，必須滿足兩個條件：

設定TRBL

父級設定Position屬性

總結：有父級元素時以父元素左上角為原點定位。padding無效；無父級元素時以瀏覽器左上角為原點定位；

【position:relative】

? ? ?意思是：相對定位，他是默認參照父級的原始點為原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。

[li如果沒有TRBL，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角(到這里和absolute第一條一樣)，如果在沒有父級元素的情況下，存在文本，則以文本的底部為原始點進行定位并將文字斷開(和absolute不同)。

? ? 總結：無論父級存在不存在，無論有沒有TRBL，均是以父級的左上角進行定位，但是父級的Padding屬性會對其影響。

? ? absolute不可以用來布局頁面，只能用于將某個元素定位于屬性為absolute的元素的內部某個位置。

? ? 屬性為relative的元素可以用來布局頁面，屬性為absolute的元素用來定位某元素在父級中的位置，既然屬性為absolute的元素用來定位某元素在父級中位置，就少不了TRBL，這時候根據一開始講的absolute的第三條，如果父級元素沒有position屬性那么absolute元素就會脫離父級元素，但是如果是布局頁面，父級元素position的屬性又不能為absolute，不然就會以瀏覽器左上角為原點了，所以父級元素的position屬性只能為relative！

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

總結

以上是生活随笔為你收集整理的css中position的两种定位（absolute、relative）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。