position
relative:相对定位
解释:相对定位是相对于当前自己的位置.同时相对定位其本身所占位置并没有改变,只是其坐标改变,说白了也就是学生在班级里面有自己的座位而相对定位就是这个学生在移动而座位并没有动,所以这也是为什么下图中的绿色按钮能压住红色按钮的原因.

<div style="width: 200px; height: 300px; border: 1px solid red ">

<div style="background-color: greenyellow;
width: 100px;
height: 100px;
position: relative;
left: 20px;
top: 20px;
">
</div>

<div style="background-color: darkred;
width: 100px;
height: 100px;
">
</div>

</div>

9ECCB6FC-DC53-4939-9C78-62A06E3ECA02.png

position:
absolute:绝对定位
解释:绝对定位是相对于其父视图来进行定位,由于子视图的父视图分很多层级比如:a标签的父视图是div,而div的父视图是body;所以为了区分是相对于那个层级的父视图,就规定了设置绝对定位的时候父视图需要设置position: relative;这个属性,这也就是常说的子绝父相;如果子视图的所有父视图都没有设置position: relative;这个属性,那么子视图就是相对于最外层的父视图,也就是body标签.
同时需要说明的是,绝对定位的元素是悬浮在其父视图之上的,这也是为什么下图的黄色按钮能够压在p标签之上的原因

<div style="background-color: greenyellow;
width: 100px;
height: 100px;
position: relative;
">
<p>代收款发快递费发快递费发快递费</p>

  <div style="background-color: yellow;
width: 40px;
height: 40px;
position: absolute;
left: 20px;
top: 20px;
">
  </div>

</div>

17B1BEBA-BDD3-4C6C-B7A8-93373EA31DF8.png

附注: 最后多提一嘴

如果在两个绝对定位的的元素添加在同一位置如何来控制两个元素的显示层次?-----这个时候就用到了**z-index: 这个属性谁的z-index: **值高谁就在最前面,这也就是为什么下图黄色div能压住蓝色div的原因

<div style="background-color: greenyellow;
width: 100px;
height: 100px;
position: relative;
">
<p style="z-index: 100">代收款发快递费发快递费发快递费</p>

  <div style="background-color: yellow;
width: 40px;
height: 40px;
position: absolute;
left: 20px;
top: 20px;
z-index: 100;
">
  </div>

  <div style="background-color: blue;
width: 40px;
height: 40px;
position: absolute;
left: 30px;
top: 30px;
">
  </div>


</div>

E5207696-73AD-4211-B150-C58B45E78549.png