设置relative 后再设置定位 原有位置空白

问题描述：当元素同时设置position:relative和top时，元素原本位置会出现空白。

还原代码：

/*css*/
.skyblue,.yellowgreen,.pink {
   height: 60px;
   background-color: skyblue;
   position: relative;
 }
.yellowgreen {
   background-color: yellowgreen;
   top: 20px;
}
.pink {
   background-color: pink;
}

<!-- html-->
<div class="skyblue"></div>
<div class="yellowgreen"></div>
<div class="pink"></div>

效果：

问题原因： MDN-postion给的解释是——元素position=relative时，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。由此我们可以看出，元素position=relative时，其占用的位置就是为添加定位时的位置，如果添加定位信息，会造成原有位置留白和元素遮盖/被遮盖。

解决办法：

1. 去除原有位置空白——给对应方向添加相同像素（负的）的margin，上面例子可以给.yellowgreen元素加上margin-top: -20px;，效果如下

2. 防止元素遮盖/被遮盖——给与该元素（.yellowgreen元素）发生遮盖关系的元素（.pink元素）加上相同像素的margin，上面例子给.pink元素加上margin-top: 20px;效果如下

题外话：给position=relative元素添加定位属性，就是吃着碗里的还要占着锅里的，要根据自己的实际需求来。