参考了：http://www.w3cfuns.com/article-258-1-1.html

1.在没有父级的情况下

absolute–以浏览器左上角为参考点，trbl辅助定位

relative–以浏览器左上角为参考点，trbl辅助定位 —如果元素的同级 ，就会以正常的文档流来布局，然后再执行top元素，相当于mairgin-top！

 

2.有父级，但是父级没有设置position属性

absolute —以浏览器左上角为参考点，trbl辅助定位

relative–以父级为参考点，trbl辅助定位，如果有padding 以内容区左上角辅助定位

 

3.有父级，并且父级设置了position属性

absolute —以父级为参考点，trbl辅助定位，如果有padding  还是以父级左上角辅助定位

relative–以父级为参考点，trbl辅助定位，如果有padding 以内容区左上角辅助定位

 

4.文档流

absolute —脱离文档流，站着排队，人一走，位置就没了。

relative–不脱离文档流，取号排队，人一走，位置还在。会占着那个坑，即使给div设置top属性

总结：如果用定位来布局页面，父级元素的position属性必须为relative，因为absolute 需要以浏览器左上角为参考点，，trbl辅助定位 ，当前面的布局发生了改变，会产生影响！

而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用relative，计算的时候不要忘记计算padding的值。

—以上需要自己写几个简单的例子证明下。-

 

版权声明：本文为qianduanxiaocaij原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/qianduanxiaocaij/p/4898039.html