position: relative 元素“挪位置却占地方”是因为它不脱离文档流，浏览器先按原始布局盒分配空间、参与父高计算和margin折叠，再在绘制阶段视觉偏移；空白即未被抹除的原始布局盒。
因为 position: relative 的设计逻辑就是「先占位、再画到别处」，不是移动盒子本身，而是移动它的渲染层——原始布局盒（layout box）全程保留在文档流中，参与父容器高度计算、margin 折叠、flex/grid 轨道分配等所有布局阶段。
relative 元素的 top/left 偏移不触发重排，只改变绘制位置
浏览器渲染分两步：布局（layout）和绘制（paint）。position: relative 的 top、left 等属性只在绘制阶段起作用，布局阶段完全无视这些偏移值。所以：
- 父容器高度仍按元素原始尺寸 + margin 计算，哪怕你写了
top: 100px把它推到屏幕外 - 兄弟块级元素不会上提补位，反而被“顶开”一段距离——那正是原始布局盒留下的空白
-
getBoundingClientRect()返回的是原始布局盒坐标，不是你眼睛看到的位置 - 如果父容器是
display: flex，该子项的flex-basis和轨道尺寸仍基于原始位置，位移不改变任何 flex 行为
为什么不能直接用 absolute 替代来“清空白”
把 position: relative 换成 position: absolute 确实能消除占位，但会引入更隐蔽的布局断裂：
- 父容器可能塌陷（尤其当它是唯一撑高内容时），
height: auto失效 - 兄弟元素的 margin 折叠立即失效，相邻块间距突变
- 若没给父级加
position: relative，absolute 元素会相对于视口定位，“飞出”预期区域 - 子元素设
position: absolute时，将失去这个父级作为 containing block，定位参考错乱
用负 margin 抵消是最直接、副作用最小的解法
只要偏移量是固定像素，就能用反向 margin 精准对冲原始占位：
立即学习“前端免费学习笔记（深入）”；
- 写了
top: 12px，就加margin-top: -12px - 写了
left: -8px，就加margin-left: 8px（注意符号相反） - 避免同时写
top: 10px和margin-top: 10px，否则视觉偏移变成 20px - 百分比偏移（如
top: 5%）无法用百分比margin安全抵消，此时应改用transform: translateY(5%)
真正容易被忽略的，是那些依赖父容器高度自适应、margin 折叠或 flex/grid 自动轨道分配的场景
这些地方一旦用了 position: relative 又没处理占位，问题不会立刻报错。它会在响应式断点切换、动态插入内容、或父容器尺寸变化时突然暴露——比如一个按钮微调后，整个卡片区块在小屏下莫名多出 20px 空白，查半天才发现是它父级的 relative 占位没抵消。
