在DIV框中相对的定位问题，这是我们在使用DIV+CSS中常常遇到的问题。如果我们没有对position有很深的理解就常常会出现很多问题。那么首先我们来了解下position的几个常用值：

例子：

<div class="case1">
  <div  class="case2">
  </div>
</div>

.case1{
  position: relative;
}

.case2{
  position: absolute;
}
只要你的基础元素有position: relative。那它里面的元素用position: absolute就会基于外面的那个元素的位置。

如果两个元素不是嵌套元素(nested element) 而是同等级别的，那需要使用javascript来完成。

relative和absolute的区别

1、relative。定位为relative的元素脱离正常的文本流中，但它在原来所占有的位置还存在，

黄色背景的层定位为relative，红色边框区域为其在正常流中的位置。在通过top、left对其定位后，从灰色背景层的位置可以看出其正常位置依然存在。

2、absolute。定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。如图2：

可以看到，在将黄色背景层定位为absolute后，灰色背景层自动补上。

3、relative与absolute的主要区别：

首先，是上面已经提到过的在正常流中的位置存在与否。

其次，relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。如图3：

图中，红色背景层为relative定位，其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute，则情形如图4：

可以看到，红色背景层依然定义top:20px；left:20px；但其相对的元素变为定位方式为absolute或relative的黄色背景层。因 此，对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都 未定义absolute或relative，则其将相对body进行定位，如图5：

除top、left、right、bottom定位外，margin属性值的定义也符合上述规则。

文章来自深蓝互联http://www.szdbi.com/WEBkaifajishu/2014-07-10/11.html转载请注明出处！