你真的理解position？

对于position的各个属性，具体如下：

值	描述
static	默认。位置被设置为static的元素，它始终会处于页面流给予的位置（一个static元素会忽略任何top、bottom、left或right声明）。
relative	位置被设置为relative的元素，可将其移至相对于其正常位置的地方，因此"left:20"会将元素移至元素正常位置左边20个像素的位置。
absolute	位置被设置为absolute的元素，可被定位于相对于包含它的元素的指定坐标。此元素的位置可通过"left"、"top"、"right"以及"bottom"属性来规定。
fixed	位置被设置为fixed的元素，可被定位于相对于浏览器窗口的指定坐标。此元素的位置可通过"left"、"top"、"right"以及"bottom"属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于IE7（strict模式）。

对于position:relative这个属性：

      当一个元素设置了position：relative后，设置这个不可层叠， 它可以像绝对定位一样， 但将依据left，right，top，bottom等属性在正常文档流中偏移位置 。

许多人经常这样用：

   

这样，最里边的那个盒子就会相对于inner_box来进行绝对定位，

可以试一下，如果去掉inner_box的定位属性：

那么最里边的盒子in就会相对于大盒子box来进行绝对定位。 为什么呢？

原因：

   inner_box因为进行了相对定位，所以它偏离了最初的文档流，而in作为它的子元素，也跟着偏移了，所以当in设置了绝对定位属性是，它是以inner_box当前位置的左上角作为原始点进行定位，也即：   

      参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。

对于position：absolute;

如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位 
如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。

参考： http://www.jb51.net/article/16461.htm