relative adverb 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时，其占用的位置就是为添加定位时的位置，如果添加定位信息，会造成原有位置留白和元素遮盖/被遮盖。
解决办法：

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

文章插图

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

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

relative adverb relative

秒懂生活扩展阅读