position: relative 的定位参照物是元素自身在文档流中的原始位置，它仅视觉偏移而不脱离文档流，保留原始占位空间，常作为 absolute 子元素的定位锚点。
因为 position: relative 的设计语义就是“动而不走”——它只改变渲染位置，不改变布局位置。
relative 的定位行为本质是视觉偏移，不是布局重排
浏览器在布局阶段（Layout）仍按元素原始位置分配空间、计算父容器高度、处理 margin 折叠；到绘制阶段（Paint）才把元素画到 top/left 指定的新位置。所以你看到的“空白”，是它在布局中真实占位的证据。
- 即使
top: 999px把元素推到视口外，父容器高度、兄弟元素位置都不变 -
getBoundingClientRect()返回的是原始布局盒坐标，不是视觉位置 - 子元素的
margin折叠、flex项目对齐、grid轨道尺寸，全按原始位置算
为什么不能让 relative 自动腾出原空间
这不是缺陷，而是语义分工。CSS 定位模型把“保留占位的微调”和“彻底抽离的精控”拆成两个能力：
-
relative的核心价值之一是当“定位锚点”：轻量、稳定、不破坏流，是absolute子元素最常用的父容器 - 如果
relative也能脱离文档流，它就和absolute失去区分意义，嵌套定位逻辑会混乱（比如：子absolute该参照谁？） - 真需要“动且不留坑”，直接换
position: absolute；真需要“不动但提供锚点”，就只加position: relative不写偏移
常见误判场景：你以为它没生效，其实是它太守规矩
典型现象包括：
立即学习“前端免费学习笔记（深入）”；
-
top: 20px后下方元素没上移，反而被撑开距离——因为它原位置还“坐着” - 父容器设了
background-color，偏移后下方露出底色——原位置留空，背景没覆盖 - 用
z-index盖不住隔壁absolute元素——relative必须显式设z-index才创建新层叠上下文 - 父容器只加
display: flex或overflow: hidden，却没设position: relative——子absolute仍会飞到视口左上角
最容易被忽略的是：父容器有没有真正成为“已定位祖先”，不取决于它看起来是不是包裹了子元素，而取决于它是否满足 position ≠ static 这个硬条件——哪怕只加了一行 position: relative，没动过位置，它就已经开始履职了。
