css：解决position: relative定位后出现的空白

问题描述

某一元素设置position: relative之后，原本的位置会留下一块空白区域，其后的元素并不会自动补全这块空白。

问题原因

该关键字(position: relative)下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置，因此会在此元素未添加定位时所在位置留下空白。

解决方法

1. 使用绝对定位
2. 使用诸如margin-top: -10px代替position: relative; top:-10px实现相同效果
3. 给其后的每个元素均设置position: relative，使其移动一个相同的值。（显然不是一个好方法）