众所周知，relative和absolute有一个区别在于relative是相对自身定位，而absolute是相对于最近的定位父级定位，而此时的相对定位经过top值改变其在文档流中的位置之后，自身本来的位置依然在文档流中占据位置。
要想解决这个问题，我的想法就是给个margin负值，以减少下方的空白
<body>
<!-- 此时div占据的位置是他自身的高度加上top值为110px -->
<div style="100px;height:100px;border:1px solid red;position:relative;top:10px">
</div>
</body>解决这个问题
/*给div设置一个margin负值删除自身最初在文档流中留下的空白*/
div{
margin-top:-10px;
}例：
<body>
<!-- 此时div占据的位置是他自身的高度加上bottom值为110px -->
<div
style=" 100px;
height:100px;
border:1px solid red;
position:relative;
bottom:10px"
>
</div>
</body>解决：
/*给div设置一个margin负值删除自身最初在文档流中留下的空白*/
div{
margin-bottom:-10px;
}