absolute 的定位原点和定位距离

position的值

• absolute
  生成绝对定位的元素，相对于值不为static的第一个父元素进行定位。
• fixed（老IE不支持）
  生成绝对定位的元素，相对于浏览器窗口进行定位。
• relative
  生成相对定位的元素，相对于其元素本身所在正常位置进行定位。
• static
  默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right,z-index声明）。
• inherit
  规定从父元素继承position属性的值。

偏移属性

top | right | bottom | left
当偏移属性的值为百分数，是相对于包含块的宽高。

定位原点

relative定位的元素，是相对于元素本身所在的位置来进行定位。
absolute定位的元素，先找到绝对定位元素的一个position的值不为static的祖先元素，然后相对于这个祖先元素的左上角来定位。

定位距离

在计算定位距离的时候，从祖先元素的左上角开始算。
举个例子：

<div class="box">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</div>

.box{
    width: 500px;
    height: 500px;
    background-color: aquamarine;

}
.div1{
    width: 100px;
    height: 100px;
    border: 3px solid black;
    padding-top: 50px;
    margin-top: 50px;
    position: relative;
    background-color: antiquewhite;    
}
.div2{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 206px;
    background-color: red;
    border: 3px solid green;    
}

给div1添加了外边距、边框、内边距，该元素框总高度为206px：padding-top（50px） + margin-top（50px） + border-top（3px） + border-bottom（3px）
div2的top值小于206px就会与div1有重叠。

渲染效果：