css中的絕對定位和 相對定位

點擊上方藍字「郭朋濤網頁設計」可直接關注

很多學習布局的同學，都卡在定位這塊，難就難在相對定位與絕對定位的配合上，不知道他們兩個之間具體有什麼區別。

這節課雖然文字性的內容比較多，但是基本上每一句話都很重要，如果想學好，那就耐下心來仔細看，對教程中的每個假設都要自己驗證，自己總結規律，如果自己懶的證明，那就記住本節最後的話就行了。

提問：如果頁面內某個元素沒有設定position屬性，那麼他是否具有position屬性？

回答：具有position屬性，並且屬性值是static。原因在於網頁裡任一元素的默認position屬性值均是static（靜態）。

上面這個問題主要是給大家補充一個知識點，很多Web前端開發工程師都不知道這點，所以在這節開頭給大家補補課。

這節課主要講講absolute（絕對定位）和 relative（相對定位）。

【position:absolute】

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

為了讓大家更容易理解這句話，我們舉個例子

例子

製作一寬度為200px，高度為200px，背景色為紅色(#900)的方塊，距離瀏覽器左側220px，距離瀏覽器頂部為100px，效果：

分析：如果想實現這個效果，我們用外邊距也是可以實現的，但是我們這節學的是定位，那麼我們就要用定位的知識來實現。

要知道，當一個元素具有了定位屬性（特指絕對定位和相對定位）後，想把它精確定位於某一個位置，只需要設置TRBL中的任意相鄰的兩個就可以，針對上面的例子我們用left和top

HTML代碼：

CSS代碼：

絕對定位具有以下屬性：（下面的這些屬性大家自己證明，對於下面說的「父級」，就是在原有的盒子外面，在套一層寬度和高度大於原有盒子尺寸的盒子）

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

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

如果設定TRBL，並且父級設定position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置由TRBL決定。即使父級有Padding屬性，對其也不起作用，說簡單點就是：它只堅持一點，就以父級左上角為原點進行定位，父級的padding對其根本沒有影響。

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

設定TRBL

父級設定Position屬性

上面的這個總結非常重要，可以保證各位在用absolute布局頁面的時候，不會錯位，並且隨著瀏覽器的大小或者顯示器解析度的大小，而不發生改變。

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

【position:relative】

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

為了幫助大家理解上面的那句話，還是拿個例子來說明

例子：

製作一寬度為400px，高度為300px，背景色為灰色(#ccc)的方塊，水平居中於瀏覽器，id為div1，在div1內，製作一寬度為100px，高度為100px，背景色為綠色(#090)的方塊。效果：

HTML代碼

CSS代碼

從上面代碼是不是可以看出，相對定位的元素div2是以父級div1的左上角為原始點的，如果需要將div2定位於div1的某處的話，肯定需要TRBL中的任意相鄰兩個，現在將div2定位於div1內（80px,60px）處，也就是div2距離div1的左邊為80px，頂部為60px，效果如下：

為了達到這個效果，只需要給div2一個left和top的值就可以了

如果現在我們再給div1一個內邊距padding:50px，那麼div2以哪裡為原點呢？html代碼沒變和上面一樣，下面只列出CSS代碼

效果如下：（斜線部分為內邊距區域，在實際效果中是不沒有的）

現在知道div2以哪裡為原點了吧~

相對定位有以下屬性：（同樣大家在下面自己證明）

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

如果設定TRBL，並且父級沒有設定position屬性，仍舊以父級的左上角為原點進行定位(和absolute不同)

如果設定TRBL，並且父級設定position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置由TRBL決定(前半段和absolute一樣)。如果父級有Padding屬性，那麼就以內容區域的左上角為原點，進行定位(後半段和absolute不同)。

以上三點可以總結出，無論父級存在不存在，無論有沒有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屬性必須為relative，而定位於父級內部某個位置的元素，最好用absolute，因為它不受父級元素的padding的屬性影響，當然你也可以用relative，計算的時候不要忘記計算padding的值。

郭朋濤 (個人微信：mrguopengtao)

郭朋濤，掘土峰創始人，從事網頁設計行業8年，網頁教學4年。致力於培養有思想的網頁設計師。喜歡請點擊右上角分享，謝謝。作者QQ：363708180

▲回復「m」，查看更多精彩文章

▲掘土峰：www.juetufeng.com

❤感謝轉載分享