CSS中position属性值relative与absolute区别

背景：
    在做网页设计时，需要定位HTML元素位置时，势必要使用到CSS样式position值relative、absolute。

样例：

<div style="width:80px; height:60px; border:solid 1px #FF0000;">
    A
</div>
<div style=" width:80px; background:#0000FF; position:relative; top:20px;">
    B
</div>
<div style="width:80px; background:#FF0000; position:relative; top:20px">
    C
</div>
<div style="width:80px; height:60px; border:solid 1px #00FF00">
    D
    <br/>
    E
</div>

注：position值为relative的元素以其前面兄弟元素为参照，并且元素左上角坐标就是后面兄弟元素左上角坐标

<div style="width:80px; height:60px; border:solid 1px #FF0000;">
    A
</div>
<div style="width:80px; height:60px; border:solid 1px #00FF00; position:relative">
  <div style="position:absolute; left:15px; top:20px; background:#0000FF;">
    B
  </div>
</div>

注：position值为absolute的HTML元素其位置是以position样式值为relative最近祖先元素为参照.如果没有则以浏览器左上角(或者BODY元素)为参照

最佳实践：
最好时父relative元素中所有子元素采用absolute元素，这样嵌套