不是bug，是position:relative的必然行为：元素不脱离文档流，浏览器先按原始位置分配空间再视觉偏移；可用负margin精准抵消（如top:12px配margin-top:-12px），或改用transform:translate()绕过占位。
相对定位元素偏移后留下空白，不是 bug，是 position: relative 的必然行为——它不脱离文档流，浏览器在布局阶段仍按原始位置和尺寸分配空间。
relative 元素的 top/left 偏移为什么不影响其他元素布局
因为 position: relative 只触发视觉重绘，不触发布局重排。浏览器先完成整个文档流的尺寸计算（包括该元素原始占位）、父容器高度、兄弟元素 margin 折叠，最后才把元素“画”到新位置。所以：
-
top: 20px后，下方元素被顶开，不是因为“它动了”，而是因为它“还在那儿” -
getBoundingClientRect()返回的是原始布局盒坐标，不是视觉位置 - 父容器设置了
background-color，但偏移后下方露出底色，正是原占位未被覆盖的直接证据
用负 margin 抵消空白是最直接、副作用最小的解法
只要偏移量是固定像素值，就能用反向 margin 精准对冲，让视觉位置与逻辑位置重合：
- 写了
top: 12px，就加margin-top: -12px - 写了
left: -8px，就加margin-left: 8px（注意符号相反） - 避免同时写
top: 10px和margin-top: 10px，否则会双倍偏移 - 百分比偏移（如
top: 5%）无法用百分比margin安全抵消，此时应改用transform: translateY(5%)
为什么不能直接换成 absolute 来清空白
虽然 position: absolute 确实能彻底移除占位，但代价常被低估：
- 父容器可能塌陷为
height: 0，尤其当它是唯一撑高内容的子项时 - 兄弟元素失去文档流参照，
margin折叠失效、flex/grid轨道重算异常 - 若父容器没设
position: relative，该元素会相对于视口定位，大概率飞出可视区 - 子元素设
position: absolute时，将不再以它为定位上下文（absolute元素不提供定位上下文）
transform: translate() 能绕过空白，但交互区域不变
transform: translateY(10px) 不影响文档流，后续元素自动上提填补，性能也更好（只重绘，不重排）。但它只是视觉位移：
- 点击区域、
:hover、焦点管理仍作用于原始布局盒，容易产生交互错位 - 内部
position: absolute子项的定位参考点仍是原始边界框，不是 transform 后的视觉位置 - 旧版 Android WebView 对
transform+border-radius组合有渲染偏移 bug
真正难处理的从来不是“怎么去掉空白”，而是判断这个元素是否本就应该参与文档流——比如它要撑开父容器、要和相邻块级元素共享 margin 折叠、或是作为子 absolute 元素的定位上下文。这时候强行清空白，反而是在掩盖布局意图的矛盾。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
