relative定位本质是视觉偏移而非布局重排，布局阶段仍按原始位置占位并参与流计算，绘制阶段才偏移到top/left指定位置；它不脱离文档流，但可作为absolute子元素的定位锚点。
relative 的定位行为本质是视觉偏移，不是布局重排
浏览器在布局阶段（Layout）仍按元素原始位置分配空间、计算父容器高度、处理 margin 折叠；到绘制阶段（Paint）才把元素画到 top/left 指定的新位置。所以你看到的“空白”，是它在布局中真实占位的证据。
常见错误现象包括：top: 20px 后下方元素没上移，反而被撑开距离——因为它原位置还“坐着”；父容器设了 background-color，偏移后下方露出底色——原位置留空，背景没覆盖。
relative 元素仍参与所有文档流相关计算
子元素的 margin 折叠、flex 项目对齐、grid 轨道尺寸，全按原始位置算；getBoundingClientRect() 返回的是原始布局盒坐标，不是视觉位置；offsetHeight 和 offsetWidth 也基于原始占位，不受 top/left 影响。
容易踩的坑：
- 以为加了
position: relative就能用z-index盖住隔壁absolute元素——其实必须显式设z-index才创建新层叠上下文 - 父容器只加
display: flex或overflow: hidden，却没设position: relative——子absolute仍会飞到视口左上角
relative 不脱离文档流是语义设计，不是实现缺陷
position: relative 的设计语义就是“动而不走”——它只改变渲染位置，不改变布局位置。它的核心价值之一是当“定位锚点”：轻量、稳定、不破坏流，是 absolute 子元素最常用的父容器。
如果 relative 也能脱离文档流，它就和 absolute 失去区分意义，嵌套定位逻辑会混乱（比如：子 absolute 该参照谁？）。
真需要“动且不留坑”，直接换 position: absolute；真需要“不动但提供锚点”，就只加 position: relative 不写偏移。
最容易被忽略的是“已定位祖先”的硬条件
父容器有没有真正成为“已定位祖先”，不取决于它看起来是不是包裹了子元素，而取决于它是否满足 position ≠ static 这个硬条件——哪怕只加了一行 position: relative，没动过位置，它就已经开始履职了。
注意隐式 containing block：父级若含 transform、filter 或 will-change，哪怕它是 static，也可能偷偷接管定位上下文，导致子元素参照错对象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
