结论：relative（相对定位）是相对于自己目前所在的位置进行定位，元素还是处于文档流当中。
absolute（绝对定位）是相对于离它最近的且不是static定位的父元素进行定位，而且元素脱离文档流，它原本的位置就是空的，后面的元素会上来补空位。
<div class="container clearfix">
<div class="box">
</div>
</div>
<div class="container1 clearfix">
<div class="box1">
</div>
</div>
.container{
width: 500px;
height: 300px;
border: 1px solid red;
position: relative;
top: 100px;
left: 100px;
}
.box{
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:50px;
left: 50px;
}
.container1{
width: 500px;
height: 300px;
border: 1px solid red;
background-color: aquamarine;
position: relative;
}
.box1{
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:50px;
left: 50px;
}
image.png
第一个box设relative相对于自己的位置向下、向右偏移100px，此操作会与下面的box重叠
里面的小box设absolute相对于大box进行定位，前提是大box已经有非static定位，否则会相对于html进行定位
如果我们把container，也就是大box的position删掉，此时的小box相对根元素html进行定位，效果是这样：
为了能看出区别，我给大box加了100margin
以前的误区：之前认为一个元素要相对于父级元素进行绝对定位，父元素设relative，子元素设absolute才行。其实不是，只要父元素有非static定位即可。
若父元素和子元素都设absolute，则父元素相对于html定位，子元素相对于父元素定位。
参考：https://blog.csdn.net/weixin_42067967/article/details/80152403
