relative和absolute的区别，话不多说，先上代码
<html> <head> <style> .container{ width: 300px; height: auto; background: rgb(54, 181, 219); positive：relative; } .box{ width: 100px; height: 100px; border: 2px solid rgb(247, 129, 129); } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html>结果如下 给box添加属性relative，并赋予left和top偏移量
<div class="box" style="position: relative; left:50px; top: 50px;"></div>结果如下 可见，relative这个属性并没有脱离文档流的，所以元素box本身所占的位置会保留，相对于其正常的位置向下和向右移动了50px的距离。
将relative属性换成absolute
<div class="box" style="position: absolute; left:50px; top: 50px;"></div>结果如下 此时absolute元素脱离了正常的文档流，所以其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。
那么，当对 absolute 元素添加 left:50px 定位后，这个 left 究竟是对哪个元素而言呢？其实，此时将会往上查找absolute 元素的第一个父元素，如果该父元素的 position 值存在（且不为 static）,那么这个 left和top 就是根据该父元素进行的定位（上述box的父元素为container，其position为relative），否则将会继续查找该父元素的父元素，一直追溯到某个父元素具备不为 static 的 position 值为止，如果不存在满足条件的父元素，则会根据最外层的 window 进行定位。
