因为css相对定位（relative）的布局机制是“先占位，后偏移”，元素在文档流中占据的空间由其在未应用偏移前的原始尺寸决定，`top` 负值仅改变视觉位置而不影响其占用的空间。
为什么 relative 不脱离文档流？
相对定位的元素仍然保留在正常的文档流中，这意味着它原本占据的空间不会被移除或折叠。浏览器在计算页面布局时，会先根据元素的正常位置分配空间，然后再应用 `transform` 或 `position` 带来的视觉偏移。因此，即使 `top` 为负值导致元素向上移动，它原来的位置依然被保留，后续元素不会填补这个空缺。
<div style="background: lightblue; padding: 20px;">
<div style="background: lightcoral; width: 100px; height: 50px; position: relative; top: -20px;">
相对定位元素
</div>
<div style="background: lightgreen; width: 100px; height: 50px;">
后续元素
</div>
</div>
运行上述代码，可以看到红色元素虽然视觉上向上移动了20像素，但绿色元素仍然从红色元素原本的底部开始排列，中间留有空白。
absolute 与 relative 的空间处理差异
绝对定位（absolute）的元素会完全脱离文档流，不再占用任何空间，而相对定位（relative）则相反。当使用 `absolute` 时，元素的位置相对于最近的非静态定位祖先元素，且其原始空间会被其他元素填补；而 `relative` 只是将元素从当前位置“推”开，不改变其在文档流中的坐标。
<div style="position: relative; background: lightgray; padding: 20px;">
<div style="background: lightcoral; width: 100px; height: 50px; position: absolute; top: -20px; left: 0;">
绝对定位元素
</div>
<div style="background: lightgreen; width: 100px; height: 50px;">
后续元素
</div>
</div>
对比上述代码，绝对定位的红色元素向上移动后，绿色元素会立即填补其原始位置，两者之间没有空白。这进一步验证了相对定位保留空间、绝对定位不保留空间的特性。
负值偏移对重叠区域的影响
当 `top` 为负值时，元素会向上移动，可能与上方的元素发生视觉重叠，但这不影响其占用的空间。重叠区域的渲染顺序由 `z-index` 控制，但空间占用仍由原始位置决定。例如，如果上方元素有背景色，负值偏移可能导致下方元素的部分内容被遮挡，但布局结构不变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
