前言

这篇文章主要是讲解position中的两种布局方式relative和absolute,彻底把他搞定

(一)了解HTML

既然做HTML必须得了解基础,我们写的网页主体按照层级来看最外层是html紧接着就是body,body再往里走就到了我们想要展示的内容了

屏幕快照 2018-07-25 下午3.03.47.png

从上面的图来看目前是正常的显示,这种显示方式,按照官方的说法就是正常流或者说是文档流,白话就是按照我们写的顺序从上到下,从左到右展示

(二) absolute和relative的区别

先看下面的图

屏幕快照 2018-07-25 下午3.09.02.png

这里我们看到了区别absolute和relative我们设置的都是left:100px但是为啥层二比层三更偏右呢?为了更好理解我把图他们设小点再看

屏幕快照 2018-07-25 下午3.12.13.png

看到没这个时候层二的位置偏移的正确的但是层三为什么不对呢?原因就是body的默认的margin并不是0接下来我们把它设为0再看

屏幕快照 2018-07-25 下午3.15.20.png

这个时候发现了absolute和relative偏移的一样了而且层一也完全靠边了,但是这里面透露着一个问题,就是为什么层二和层三最初没有对齐的问题.先引用一下官方的介绍

relative:生成相对定位的元素，相对于其正常位置进行定位
absolute:生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位

讲真的这些官话我没看懂我再用白话来说一下吧

relative:他定位的方式为相对于自己之前的默认的位置,
可以说成是你之前在A点站着,现在要你向左移100px到B这个100px是相对于A的位置来说的.

absolute:这个就比较好说了,说的就是他自己向上一层一层的找自己的父元素,
然后看他们的position属性,谁的position属性不是static他就以谁为标准偏移.
如果一直没有的话就会找到body,body也不是的话,但是已经是最后一层了,
所以他就只能以body的初始位置为基准了.这就是之前为什么没对齐的原因.
注:(所有的块属性的position默认为static)

看下图div2是div3的父元素这个时候div3会以div2为基准偏移,因为div2的position为relative

屏幕快照 2018-07-25 下午3.34.36.png

看下图div2是div3的父元素这个时候div3不会以div2为基准偏移,而是会以body为基准偏移,因为div2的position为static

屏幕快照 2018-07-25 下午3.37.43.png

好了看到这应该明白了吧,还有一点就是如果要使绝对定位absolute生效，必须指定left、right、top和bottom属性中的至少一个！

如果有不明白的可以留言解答,纯手写,喜欢点个赞!