Web前端面試題第八道—絕對定位與相對定位

相對定位（relative）：

先說相對定位：跟它的名一樣，相對嘛，要有一個參照物，但這個參照不是別的，是它自己在原來文檔流程中的位置。相對定位之後的物件並沒有完全從文檔流中脫離，這個物件原來在文檔中的位置保留著（站著茅坑不拉屎），偏移後的物件會把其它的層遮罩住。

將相對定位特徵總結如下：

①相對定位的元素，在沒有設定寬度的情況下，寬度是整個瀏覽器的寬度，或是依賴於父元素的寬度。

②相對定位的塊狀元素相對於原來位置移動，移動後仍佔據文件流的位置，不影響其他元素的佈局

下面透過程式碼進行驗證

在瀏覽器中放置5個盒子，用不同的顏色來表示，程式碼如下

##HTML程式碼

CSS程式碼

#最初效果圖

給第三個盒子設定相對定位

元素相對於原來位置偏移，寬高都沒變，撐大了容器，還佔據著原來在文檔流中的位置，對其它元素的佈局沒有產生影響。

（absolute）：

#（absolute）：被絕對定位的物件將從文檔流中脫離，絕對定位的參考位置就不再是自己了，是哪個，就看它的上級或上上級有沒有定位了，使用left， right，

top

，

bottom

等屬性相對於其最接近的一個有相對或絕對定位設定的父級物件進行絕對定位，如果父級沒有設定定位屬性，則會相對於html根元素進行定位，看了一些貼文發現有人認為如果父物件沒有設定定位屬性，則會相對於body進行定位，這個說法是不對的。

將絕對定位的特徵總結如下：

①絕對定位的塊狀元素在沒有設定寬度的情況下，寬度由元素裡面的內容決定

②脫離後原來的位置相當於是空的，下面的元素會來佔據位置

③絕對定位的物件相對於距離自己最近的設定了相對定位或絕對定位的父物件進行定位

④如果父元素沒有定位，則相對於html根元素定位

##下邊還是透過這五個盒子的偏移來驗證

（1）區塊元素無偏移值

上邊的5個盒子，只給box5一個絕對定位，沒有偏移值。此時塊狀元素只是漂浮在原來的位置，如果後邊還有塊狀元素，將會佔據他在文檔流中的位置，我們在box5下邊加上一個box6看一下效果。

說明：絕對定位的塊狀元素在沒有定義寬度的情況下，寬度由元素裡面的內容決定。

效果圖如下

加上一個box6的效果

#############從圖中可以看出，box6已經佔據了box5在文檔流中的位置了。 ###

（2）有偏移值

如果設定了偏移值而父元素沒有設定相對定位或絕對定位的情況下，元素相對於根元素定位（即html元素，注意是相對於根元素，而不是相對於body）用box5的偏移來驗證。

①給box5一個偏移量，父元素沒有相對或絕對定位

效果圖如下

#②給box5同樣的偏移量，給body元素一個絕對定位（body元素設定為了absolute，絕對定位的塊狀元素的寬度由最長p決定，寬度變小了）：

效果圖如下

圖片發自發自App

從上邊的兩張效果圖明顯發現相對於根元素的定位與相對於body的定位是不相同的，主要的差別在於有沒有算進去body的margin值。

下面在五個盒子外邊再嵌套三個父盒子，並給這三個父盒子一個定位，來驗證是否是根據最近定位的父元素進行偏移。

程式碼如下

HTML程式碼

CSS程式碼

#效果圖

#圖片發自App

從上邊很明顯看出來的box5是相對於第三層容器也就是離它最近的容器進行的定位。有興趣的可以試一試，把第三層容器的定位去掉，看看是不是就相對於第二層容器定位了，我已經驗證過，就不放圖了。

有同學會問，為什麼要把最外層的盒子設定為絕對定位，其它兩個設定為相對定位，這個定位的方法區別主要影響的是盒子的寬度，相對定位的塊元素在沒有設定寬度的情況下，它的寬度就是預設的瀏覽器的寬度，有父元素的情況下，則它的寬度由父元素決定，如果這個區塊元素的內容過多，則會把父元素也撐大。

，也就是說相對定位的塊元素的寬度依賴於父元素，那麼如果把這三個容器都設定為絕對定位會有什麼效果呢，先來看一看效果圖

圖片發自App

從圖中可以看出，第三層容器的寬度已經不再依賴父元素，因為它從文檔流中脫離出來了，他自己是獨立的，而他的寬度只能由內容來決定。總結起來就是，絕對定位的塊元素寬度由自己的內容決定，相對定位的塊元素在沒有設定寬度時，預設就是瀏覽器的寬度。但不管寬度怎樣，絕對定位的元素都會找到離自己最近定位（絕對或相對定位）的父元素來進行定位。

總結：

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

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

說明：本文的實驗結果是在父元素及子元素沒有設定固定寬度的情況下得來的，如果父元素設定了固定的寬度，他的子元素無論是絕對定位還是相對定位的子元素都不能超過其父元素的寬度，父元素是老大哥，誰都不能超過他。

以上是Web前端面試題第八道—絕對定位與相對定位的詳細內容。更多資訊請關注PHP中文網其他相關文章！