一、position 的四個值：static、relative、absolute、fixed。

絕對定位：absolute 和 fixed 統稱為絕對定位

相對定位：relative

默認值：static

二、relative定位與absolute定位的區別

實例：

HTML代碼：

css代碼：

?

初始效果：

?

1、relative：相對于原來位置移動，元素設置此屬性之后仍然處在文檔流中，不影響其他元素的布局

給第二個box設置relative：

元素相對于原來位置偏移，寬高都沒變，撐大了容器。

?

2、absolute:元素會脫離文檔流，如果設置偏移量，會影響其他元素的位置定位

只給第五個box設置absolute：

說明：元素在沒有定義寬度的情況下，寬度由元素里面的內容決定，效果和用float方法一樣。

?

?absolute定位原理剖析：

1.在父元素沒有設置相對定位或絕對定位的情況下，元素相對于根元素定位（即html元素）（是父元素沒有）。

現在給box5偏移值來驗證：

?

?

2.父元素設置了相對定位或絕對定位，元素會相對于離自己最近的設置了相對或絕對定位的父元素進行定位（或者說離自己最近的不是static的父元素進行定位，因為元素默認是static）。

補充：網上有人解釋為元素會相對于第一個不是static的父元素定位，我覺得這很容易讓人產生誤解。以上是我自己的定義。

現在給body元素一個絕對定位（body元素設置為了absolute，整個容器的寬度由最長div決定，寬度變小了）：

此時的box5現在相對于body元素定位

我把上面相對于html元素定位和相對于body定位的兩張圖放在一起，對比可以看到下面的圖，相對于body定位的box5距離文字box1要遠一點。所以在沒有父元素設置相對定位或絕對定位的情況下，設置了absolute的元素會相對于html根元素定位。

css代碼：

?

再來驗證這句話：父元素設置了相對定位或絕對定位，元素會相對于離自己最近的設置了相對或絕對定位的父元素進行定位

現在給box們套三個父容器，如下：

html代碼：

三個父容器的css樣式如下：

?現在的樣子，現在的box5并不是所說的相對于第一個不是static的元素定位（按這句話的說法，現在我的box5應該相對于最外層容器1偏移才對），而是相對于離自己最近的一層的設置了相對或絕對定位的父元素定位：

現在把第二個容器和第三個容器的position注釋掉（沒有position，設置top、left、bottom、right值都沒有效），結果如下：

現在box5的外層設置了相對或絕對的父元素只有最外層容器1，所以box5現在相對于最外層容器1定位。（明顯box5移動了）

現在只注釋掉第三個容器的position

原理也是一樣，現在相對于第二個容器定位（top：50px，離自己最近的設置了相對或絕對定位的父元素）：

?上面第二個和第三個容器都設置的是相對定位，現在改成絕對定位：

css代碼：

?

原理和把第二、第三個容器設置為relative一樣，只是設置為absolute了之后，第三個容器包含著內容一起脫離了文檔，所以沒有撐開外面兩層容器的寬度

現在的效果：

?外面再添一個容器，來驗證上面第一、第二沒有被撐開的效果

寬度受到上一層的父容器的寬度限制，現在拉寬第一層的容器的寬度，第二層和第三層隨之變寬，效果如下：

?

但是如果容器里面有長的div，容器仍然可以被撐開，效果如下：

?

?補充：

box2設置為absolute定位之后，脫離文檔流，box3向上移，左邊被box2遮蓋了。

?

?在上面的基礎上，box3設置absolute，box3脫離文檔流（就好像box3浮起來了一樣，浮在了box2上面），box4往上移，box3蓋住box2，和部分box4.

?

?同理如果box4設置了絕對定位，就會浮起來蓋住box3和box2。

總結

relative：定位是相對于自身位置定位（設置偏移量的時候，會相對于自身所在的位置偏移）。設置了relative的元素仍然處在文檔流中，元素的寬高不變，設置偏移量也不會影響其他元素的位置。最外層容器設置為relative定位，在沒有設置寬度的情況下，寬度是整個瀏覽器的寬度。

absolute：定位是相對于離元素最近的設置了絕對或相對定位的父元素決定的，如果沒有父元素設置絕對或相對定位，則元素相對于根元素即html元素定位。設置了absolute的元素脫了了文檔流，元素在沒有設置寬度的情況下，寬度由元素里面的內容決定。脫離后原來的位置相當于是空的，下面的元素會來占據位置。

寫代碼時，一般采用“子（子元素）絕（絕對定位）父（父元素）相（相對定位）”

總結

以上是生活随笔為你收集整理的CSS3的绝对定位与相对定位的全部內容，希望文章能夠幫你解決所遇到的問題。

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