position: relative 不脱离文档流，浏览器先按原始位置布局并锁定占位，top/left仅视觉偏移，不影响其他元素布局；空白是规范行为而非bug，可用反向margin抵消。
因为 position: relative 从不脱离文档流——浏览器在布局阶段就已锁定它的原始占位，后续所有计算（父高、兄弟间距、margin 折叠）都基于这个“透明盒子”，视觉偏移只是最后一步渲染动作。
relative 元素的 top/left 偏移为什么不影响其他元素布局
它不是“移动了盒子”，而是“画到了别处”。浏览器执行流程是：先按未加 top/left 时的位置和尺寸分配空间、撑开父容器、处理相邻块级元素的 margin 合并；等整个文档流布局完成，再把该元素单独重绘到新坐标。所以：
-
getBoundingClientRect()返回的是原始布局盒位置，不是你看到的视觉位置 - 父容器设置了
background-color，偏移后下方露出底色，是因为原位置留空、背景没被覆盖 - 即使
top: 9999px把元素推到屏幕外，它下面的元素依然被顶开——空白不是 bug，是布局引擎在守规矩
用负 margin 抵消占位是最直接、副作用最小的解法
原理简单：用 margin 主动修改布局位置，与 top/left 的视觉偏移叠加，使逻辑位置和视觉位置重合。但必须注意符号和单位：
- 若写了
top: 20px，就加margin-top: -20px - 若写了
left: -15px，就加margin-left: 15px（注意正负号相反） - 避免同时设置同方向的
top和margin-top，否则会双倍偏移 - 百分比偏移（如
top: 5%）无法用百分比margin安全抵消，此时应改用transform: translateY(5%)
为什么不能直接换成 absolute 来清空白
能清，但代价常被低估：
- 父容器高度可能塌陷为 0，尤其当它是唯一撑高内容的子项时
- 兄弟元素失去原本的文档流参照，
margin折叠失效、flex轨道重算出错 - 若父容器没设
position: relative，absolute元素会相对于视口定位，大概率飞出可视区 - 子元素若设
position: absolute，将不再以该元素为定位上下文（absolute不提供定位上下文）
真正难处理的不是怎么“去掉空白”，而是得判断这个元素是否本就应该参与文档流——比如它要撑开父容器、要和相邻块级元素共享 margin 折叠、或是作为子 absolute 元素的定位上下文。这时候强行清空白，反而是在掩盖布局意图的矛盾。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
