HTML代碼：
<div id="test1">111111111111111</div>
<div id="test2">222222222222</div>
<div id="test3">333333333333333</div>
CSS代碼：
#test1 {
height: 50px;
background: red;
}
#test2 {
height: 50px;
background: blue;
}
#test3 {
height: 50px;
background: yellow;
}
初始布局效果：
?
1.相對(duì)定位：
position: relative;
相對(duì)于原來(lái)位置移動(dòng)，元素設(shè)置此屬性之后仍然處在文檔流中，不影響其他元素的布局。
將第二個(gè) div#test2 設(shè)為相對(duì)定位，元素相對(duì)于原來(lái)位置偏移：
#test2 {
height: 50px;
background: blue;
position: relative;
left: 20px;
top: 20px;
}
效果圖如下：
?
2.絕對(duì)定位：
position: absolute;
元素會(huì)脫離文檔流，如果設(shè)置偏移量，會(huì)影響其他元素的位置定位
- 在父元素沒(méi)有設(shè)置相對(duì)定位或絕對(duì)定位的情況下，元素相對(duì)于根元素定位（即html元素）（是父元素沒(méi)有）。
- 父元素設(shè)置了相對(duì)定位或絕對(duì)定位，元素會(huì)相對(duì)于離自己最近的設(shè)置了相對(duì)或絕對(duì)定位的父元素進(jìn)行定位（或者說(shuō)離自己最近的不是static的父元素進(jìn)行定位，因?yàn)樵啬J(rèn)是static）。
將第二個(gè) div#test2 設(shè)為絕對(duì)定位，元素在沒(méi)有定義寬度的情況下，寬度由元素里面的內(nèi)容決定：
（1）不設(shè)置偏移量：
#test2 {
height: 50px;
background: blue;
position: absolute;
}
效果圖如下，元素脫離文檔流：
?
（2）設(shè)置偏移量：
#test2 {
height: 50px;
background: blue;
position: absolute;
left: 20px;
top: 20px;
}
效果圖如下，元素脫離文檔流，且在父元素沒(méi)有設(shè)置相對(duì)定位或絕對(duì)定位的情況下，元素相對(duì)于根元素定位（即html元素）：
?
總結(jié)：
relative：定位是相對(duì)于自身位置定位（設(shè)置偏移量的時(shí)候，會(huì)相對(duì)于自身所在的位置偏移）。設(shè)置了relative的元素仍然處在文檔流中，元素的寬高不變，設(shè)置偏移量也不會(huì)影響其他元素的位置。最外層容器設(shè)置為relative定位，在沒(méi)有設(shè)置寬度的情況下，寬度是整個(gè)瀏覽器的寬度。
absolute：定位是相對(duì)于離元素最近的設(shè)置了絕對(duì)或相對(duì)定位的父元素決定的，如果沒(méi)有父元素設(shè)置絕對(duì)或相對(duì)定位，則元素相對(duì)于根元素即html元素定位。設(shè)置了absolute的元素脫了了文檔流，元素在沒(méi)有設(shè)置寬度的情況下，寬度由元素里面的內(nèi)容決定。脫離后原來(lái)的位置相當(dāng)于是空的，下面的元素會(huì)來(lái)占據(jù)位置。
