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為基準(zhǔn)定位，（最先放置的div在最下面）這個時候如果我們想讓他們做一些移動奸晴，使用以上灰色注釋部分的代碼是沒有用的，因為浮動對已經(jīng)絕對定位的元素是沒有影響的日麸。對于絕對定位元素寄啼，我們可以使用left、right代箭、top辕录、bottom進(jìn)行絕對定位梢卸。怎么理解呢副女？假如我們想讓灰色方塊往右移動10px,我們可以為left盒子添加left:10px;屬性。那么這個偏移量又是以什么為基準(zhǔn)的呢？上面我們提到過祖元素戴陡，我們尋找當(dāng)前的盒子是否有已經(jīng)(relative、absolute异吻、fiexd)定位的父元素，如果沒有就一直往上追溯到有已經(jīng)(relative诀浪、absolute延都、fiexd)定位的祖元素然后以該元素為基準(zhǔn)進(jìn)行自己的移動，如果都沒有這樣定位的父元素或祖元素晰房，它就以html為基準(zhǔn)移動。見下圖
2016.3.20
