position: relative“动了却还占着位”是因为其设计语义是“视觉偏移，不退出布局”，浏览器在布局阶段仍按原始位置分配空间，仅在绘制阶段偏移渲染；常见占位证据包括下方元素被顶开、父容器背景未覆盖原位、getBoundingClientRect()返回原始坐标。
relative 为什么“动了却还占着位”
因为 position: relative 的设计语义就是“视觉偏移，不退出布局”。浏览器在布局阶段（Layout）仍按元素原始位置和尺寸分配空间、计算父容器高度、处理 margin 折叠；到绘制阶段（Paint）才把元素画到 top/left 指定的新位置。你看到的“空白”，是它在布局中真实占位的证据，不是 bug，是行为正确。
哪些现象说明它确实在占位
这些不是失效，而是它正在严格执行规则：
-
top: 20px后下方元素没上移，反而被顶开距离——因为它原位置还“坐着” - 父容器设了
background-color，偏移后下方露出底色——原位置留空，背景没覆盖过去 -
getBoundingClientRect()返回的是原始布局盒坐标，不是视觉位置 - 子元素设
position: absolute，仍以它为定位上下文——哪怕它已top: 999px飞出视口
怎么让空白消失（但得想清楚要不要）
最直接、副作用可控的方式是用反向 margin 抵消：
- 写了
top: 12px，就加margin-top: -12px - 写了
left: -8px，就加margin-left: 8px（注意符号相反） - 避免同时写
top: 10px和margin-top: 10px，否则双倍偏移 - 百分比偏移（如
top: 5%）不能用百分比margin安全抵消，此时应改用transform: translateY(5%)
但要注意：如果这个元素本就要撑高父容器、参与 margin 折叠、或作为子 absolute 的锚点，强行清空白反而会破坏原有布局意图。
立即学习“前端免费学习笔记（深入）”；
为什么不能直接换 absolute 来腾位置
能腾，但代价常被低估：
- 父容器高度可能塌陷为 0，尤其当它是唯一内容子项时
- 兄弟元素不再感知它的存在，
margin折叠失效、flex/grid轨道重算出错 - 子
absolute元素将失去定位上下文（因为absolute父级不提供 containing block） - 若父容器没设
position: relative，该元素会相对于视口定位，大概率飞出可视区
真正容易被忽略的，是那些依赖父容器自适应高度或相邻块级元素 margin 折叠的场景——哪怕只加了一行 top: 1px，都可能让整个区块布局松动。
