本人一直是寫后端的，前端的知識也多少知道點，但是有些具體的就說不上來了，結(jié)果一次用到定位的時候就SB了。不明白為啥，不知道各個屬性的意思，于是乎就開始詢問度娘，看了幾篇文章后，最后發(fā)現(xiàn)該文章內(nèi)容少(就是懶得讀長篇 哈哈哈)而且說的很清楚，讀完就明白了，所以防止以后需要看時再找，就轉(zhuǎn)載一下，順便整理一下格式。
原文地址：https://www.douban.com/group/topic/64141776/?type=rec
如果用 position來布局頁面，父級元素的position屬性必須為relative，而定位于父級內(nèi)部某個位置的元素，最好用absolute，因為它不受父級元素的padding的屬性影響，當然你也可以用 position，不過到時候計算的時候不要忘記 padding 的值。”
任何元素的默認position 的屬性值均是static(靜態(tài))。
position:absolute
解釋：意思是絕對定位，他默認參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位.
有以下屬性：
- 如果沒有TRBL，以父級的左上角；
在沒有父級的時候，他是參照瀏覽器左上角；
如果在沒有父級元素的情況下，存在文本，則以它前面的最后一個文字的右上角為原點進行定位但是不斷開文字，覆蓋于上方。 - 如果設定TRBL，并且父級沒有設定
position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。 - 如果設定TRBL，并且父級設定
position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置由TRBL決定。即使父級有Padding屬性，對其也不起作用，說簡單點就是：它只堅持一點，就以父級左上角為原點進行定位，父級的padding對其根本沒有影響。
以上三點可以總結(jié)出，若想把一個定位屬性為
absolute的元素定位于其父級元素內(nèi)，只有滿足兩個條件：
- 設定TRBL
- 父級設定
Position屬性
上面的這個總結(jié)非常重要，可以保證你在用absolue布局頁面的時候，不會錯位，并且隨著瀏覽器的大小或者顯示器分辨率的大小，而不發(fā)生改變。
只要有一點不滿足，元素就會以瀏覽器左上角為原點，這就是初學者容易犯錯的一點，已經(jīng)定位好的板塊，當瀏覽器的大小改變，父級元素會隨之改變，但是設定Position屬性為absolute的板塊和父級元素的位置發(fā)生改變，錯位了，這就是因為此時元素以瀏覽器的左上角為原點的原因。
初學者很容易犯錯的是，不清楚Position屬性為absolute的板塊，若想定位到父級板塊中，并且當瀏覽器的大小改變或顯示器的分辨率改變，布局不發(fā)生改變，是需要滿足兩個條件的，只要有一點不滿足，元素就會以瀏覽器左上角為原點，從而導致頁面布局錯位。
position:relative
解釋：意思是相對定位。
- 默認參照父級的原始點為原始點，
- 無父級則以文本流的順序在上一個元素的底部為原始點，配合TRBL 進行定位。
- 當父級內(nèi)有
padding等CSS屬性時，當前級的原始點則參照父級內(nèi)容區(qū)的原始點進行定位。
有以下屬性：
- 如果沒有TRBL，以父級的左上角；
在沒有父級的時候，他是參照瀏覽器左上角(到這里和absolute 第一條一樣)；
如果在沒有父級元素的情況下，存在文本，則以文本的底部為原始點進行定位并將文字斷開(和absolut不同)。 - 如果設定TRBL，并且父級沒有設定
position屬性，仍舊以父級的左上角為原點進行定位(和absolut 不同) - 如果設定TRBL，并且父級設定
position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置由TRBL決定(前半段和absolut一樣)。
如果父級有Padding屬性，那么就以內(nèi)容區(qū)域的左上角為原點，進行定位(后半段和absolut不同)。
以上三點可以總結(jié)出，無論父級存在不存在，無論有沒有TRBL，均是以父級的左上角進行定位，但是父級的
Padding屬性會對其影響。
綜合上面對relative的敘述：
我們就可以將position屬性為relative的DIV視成可以用TRBL進行定位的的普通DIV；
或者說只要將我們平時布局頁面的div的CSS屬性中加上position:relative后，就不只是用float布局頁面了，還可以用TRBL 進行布局頁面了；
或者說加上position:relative的DIV也可以像普通的DIV進行布局頁面了，只不過還可以用TRBL進行布局頁面。
但是position屬性為absolute不可以用來布局頁面，因為如果用來布局的話，所有的DIV都相對于瀏覽器的左上角定位了，所以只能用于將某個元素定位于屬性為absolute的元素的內(nèi)部某個位置。
這樣我們就可以總結(jié)比較重要的結(jié)論：
既然屬性為absolute的元素用來定位某元素在父級中位置，就少不了TRBL，這時候根據(jù)一開始講的absolute的第三條，如果父級元素沒有position屬性那么absolute元素就會脫離父級元素，但是如果是布局頁面，父級元素position的屬性又不能為absolute不然就會以瀏覽器左上角為原點了，所以父級元素的position屬性只能為relative！
屬性為relative的元素可以用來布局頁面，屬性為absolute的元素用來定位某元素在父級中的位置
總結(jié)：
- 如果用
position來布局頁面，父級元素的position屬性必須為relative- 而定位于父級內(nèi)部某個位置的元素，最好用
absolute，因為它不受父級元素的padding的屬性影響，當然你也可以用position，不過到時候計算的時候不要忘記padding的值。- 但是定位(
position)有一個缺點，不會自適應內(nèi)部元素的高度，所以平時我們在布局頁面的時候，如果某個或者某些模塊高度永遠不變，就可以用定位，但是帆建議大家布局頁面的時候，還是要以Float為主，Position為輔！這樣你才能做出高質(zhì)量的頁面。
最后，請大家記住我這句話:“布局頁面，Float為主 ，Position為輔！”
