关于绝对定位

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