CSS中position属性值relative与absolute区别

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

样例：

[html]  view plain copy

1. <div style="width:80px; height:60px; border:solid 1px #FF0000;">  
2.     A  
3. </div>  
4. <div style=" width:80px; background:#0000FF; position:relative; top:20px;">  
5.     B  
6. </div>  
7. <div style="width:80px; background:#FF0000; position:relative; top:20px">  
8.     C  
9. </div>  
10. <div style="width:80px; height:60px; border:solid 1px #00FF00">  
11.     D  
12.     <br/>  
13.     E  
14. </div>  

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

[html]  view plain copy

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

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

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