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>③
当我们对三个div都设置了absolute定位时，三个盒子都脱离了文档流，其他元素就会忽视它们的存在去占据它们原有的位置，而由于它们都没有已经非static定位的父元素或祖元素，所以都一致以HTML为基准定位，（最先放置的div在最下面）这个时候如果我们想让他们做一些移动，使用以上灰色注释部分的代码是没有用的，因为浮动对已经绝对定位的元素是没有影响的。对于绝对定位元素，我们可以使用left、right、top、bottom进行绝对定位。怎么理解呢？假如我们想让灰色方块往右移动10px,我们可以为left盒子添加left:10px;属性。那么这个偏移量又是以什么为基准的呢？上面我们提到过祖元素，我们寻找当前的盒子是否有已经(relative、absolute、fiexd)定位的父元素，如果没有就一直往上追溯到有已经(relative、absolute、fiexd)定位的祖元素然后以该元素为基准进行自己的移动，如果都没有这样定位的父元素或祖元素，它就以html为基准移动。见下图
2016.3.20
