CSS
*{padding:0;margin:0;}
.left{
position:absolute;
/*float:left; ? ? ? */
width:30%;
min-height:200px;
background-color:#000;/*黑*/
}
.centen{
position:absolute;
/*float:right; ? ? ? ? */
width:70%;
min-height:200px;
background-color:#0F0;/*青*/
}
.da{
position:absolute;
/*float:left; ? ? ? */
width:20%;
min-height:200px;
background-color:#666;/*灰*/
}
HTML
<div class="left"></div> ? ①
<div class="centen"></div>②
<div class="da"></div>③
當(dāng)我們對三個div都設(shè)置了absolute定位時，三個盒子都脫離了文檔流，其他元素就會忽視它們的存在去占據(jù)它們原有的位置，而由于它們都沒有已經(jīng)非static定位的父元素或祖元素，所以都一致以HTML為基準定位，（最先放置的div在最下面）這個時候如果我們想讓他們做一些移動，使用以上灰色注釋部分的代碼是沒有用的，因為浮動對已經(jīng)絕對定位的元素是沒有影響的。對于絕對定位元素，我們可以使用left、right、top、bottom進行絕對定位。怎么理解呢？假如我們想讓灰色方塊往右移動10px,我們可以為left盒子添加left:10px;屬性。那么這個偏移量又是以什么為基準的呢？上面我們提到過祖元素，我們尋找當(dāng)前的盒子是否有已經(jīng)(relative、absolute、fiexd)定位的父元素，如果沒有就一直往上追溯到有已經(jīng)(relative、absolute、fiexd)定位的祖元素然后以該元素為基準進行自己的移動，如果都沒有這樣定位的父元素或祖元素，它就以html為基準移動。見下圖
2016.3.20
