相對定位和絕對定位區(qū)別

HTML代碼：

<div id="test1">111111111111111</div>
<div id="test2">222222222222</div>
<div id="test3">333333333333333</div>

image.gif

CSS代碼：

#test1 {
    height: 50px;
    background: red;
}
#test2 {
    height: 50px;
    background: blue;
}
#test3 {
    height: 50px;
    background: yellow;
}

image.gif

初始布局效果：

image

image.gif

1.相對定位：

position: relative;

相對于原來位置移動(dòng)粉铐，元素設(shè)置此屬性之后仍然處在文檔流中，不影響其他元素的布局她奥。

將第二個(gè) div#test2 設(shè)為相對定位，元素相對于原來位置偏移：

#test2 {
   height: 50px;
   background: blue;
   position: relative;
   left: 20px;
   top: 20px;
}

image.gif

效果圖如下：

image

image.gif

2.絕對定位：

position: absolute;

元素會(huì)脫離文檔流，如果設(shè)置偏移量，會(huì)影響其他元素的位置定位

在父元素沒有設(shè)置相對定位或絕對定位的情況下允趟，元素相對于根元素定位（即html元素）（是父元素沒有）。
父元素設(shè)置了相對定位或絕對定位鸦致，元素會(huì)相對于離自己最近的設(shè)置了相對或絕對定位的父元素進(jìn)行定位（或者說離自己最近的不是static的父元素進(jìn)行定位潮剪，因?yàn)樵啬J(rèn)是static）。

將第二個(gè) div#test2 設(shè)為絕對定位分唾，元素在沒有定義寬度的情況下抗碰，寬度由元素里面的內(nèi)容決定：

（1）不設(shè)置偏移量：

#test2 {
   height: 50px;
   background: blue;
   position: absolute;
}

image.gif

效果圖如下，元素脫離文檔流：

image

image.gif

（2）設(shè)置偏移量：

#test2 {
   height: 50px;
   background: blue;
   position: absolute;
   left: 20px;
   top: 20px;
}

image.gif

效果圖如下绽乔，元素脫離文檔流改含，且在父元素沒有設(shè)置相對定位或絕對定位的情況下，元素相對于根元素定位（即html元素）：

image

image.gif

總結(jié)：

relative：定位是相對于自身位置定位（設(shè)置偏移量的時(shí)候，會(huì)相對于自身所在的位置偏移）捍壤。設(shè)置了relative的元素仍然處在文檔流中骤视，元素的寬高不變，設(shè)置偏移量也不會(huì)影響其他元素的位置鹃觉。最外層容器設(shè)置為relative定位专酗，在沒有設(shè)置寬度的情況下，寬度是整個(gè)瀏覽器的寬度盗扇。

absolute：定位是相對于離元素最近的設(shè)置了絕對或相對定位的父元素決定的祷肯，如果沒有父元素設(shè)置絕對或相對定位，則元素相對于根元素即html元素定位疗隶。設(shè)置了absolute的元素脫了了文檔流佑笋，元素在沒有設(shè)置寬度的情況下，寬度由元素里面的內(nèi)容決定斑鼻。脫離后原來的位置相當(dāng)于是空的蒋纬，下面的元素會(huì)來占據(jù)位置。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者