absolute绝对定位的参考坐标和参考对象问题详解

absolute：将对象从文档流中拖出，使用left ，right ，top ，bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body 对象。而其层叠通过z-index 属性定义。

 

由此我们可以看出，absolute的参考对象是父对象，如果父对象没有定位设置则参照body对象，这里的定位设置意思就是，absolute的父对象一定要设置position:relative才有效，如下：

<div id="div1" style="position:relative;width:500px;height:300px;">
  <div id="div2" style="position:absolute;width:300px;height:150px;right:0px;bottom:0px">
    绝对定位
  </div>
</div>

 

这样设置的时候 div2就会显示在div1的右下角，如果div1没有设置relative属性，则div2会显示在浏览器右下角。

 

其次，absolute属性对象的上一个兄弟元素有float浮动属性，则要清除浮动，否则，此对象不会显示，如下：

<div id="div1">
  <div style="float:left;"></div>
  <div style="clear:both;height:0px;"></div>
  <div id="div2" style="position:absolute;width:300px;height:150px;right:0px;bottom:0px">
  </div>
</div>

 

转载于:https://www.cnblogs.com/wshiqtb/archive/2012/11/06/2756509.html