绝对定位那节已经讲到,绝对定位是将元素脱离文档流,再相对于它最近的父类元素进行定位,
而这节课 只需要 对box2进行绝对定位 ,box1根本无需position:relative 也可以达到同样的效果
那么: 为什么要使用position:relative呢
父元素绝对定位的话脱离了文档流
关于relative和absolute这段话更简洁
/*absolute的英文意思是绝对的意思,实际上是针对父级元素元素定位,如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至相对于文档的左上角定位,按照我们中国人的理解观念,这个其实是相对定位,是脱离文档流的。用了abolute属性,原有float属性将失效;
relative的英文意思是相对的意思,实际上是相对于对象当前位置的定位。而且是不脱离文档流的,就算用top、lef、bottom、right或margin将其移动位置,它也会在原来的文档流中占有自己实际大小的一块位置。
说白了,absolute是相对于父对象定位,relative是相对于当前位置定位!就是这么简单!*/
网上找到的一段话
如果只对box2进行绝对定位,那么则是相对于整个页面(html或body页面)作为定位的参考基准了
也许是这个原因: 他们需要对box1进行排版,所以要用到relative 。并且让box2在box1里绝对定位