区分position:relative; position:absolute; position:fixed
对于position:relative; position:absolute; position:fixed,很多小伙伴分不清他们具体是针对哪里移动的,下面我给大家讲讲我个人理解。
position:absolute;(绝对定位)
position:rabsolute; 他的意思是绝对定位,他是参照父级的原始点为原始点,无父级则以body的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位.
①当定义position:absolute;的div没有父级的时候它的位移的原点是页面的的左上角即body的原点
②当定义position:absolute;的div有父级的时候它的位移原点是父元素的左上角
position:relative(相对定位)
position:relative; (相对定位) 他是以自己原来的位置为原点进行的位移
position:relative; (相对定位)是相对于自身原来左上角的位置进行的位移,但是它占据的空间还是原理来的位置i
position:absolute(绝对定位); 和position:relative; (相对定位)对比
position:fixed(固定定位)
position:fixed(固定定位)它是从游览器的可视区域的左上角进行的位移(这个比较好理解就不画图了)