css中position: relative使元素在原位置视觉偏移但仍占据文档流空间，常作为absolute子元素的定位基准；absolute则完全脱离文档流、不占空间，定位参照最近的非static祖先，无则回退至视口。
relative 本来就没打算脱离文档流——它设计目的就是“动而不走”，而 absolute 的核心使命恰恰是“走而不留”。
relative 的定位逻辑：偏移 ≠ 移除
设置 position: relative 后，元素依然在文档流中，top/left 等值只是视觉位移。浏览器会照常为它预留原始空间，兄弟元素完全感知不到它动过。
- 即使
top: 999px把它推到屏幕外，父容器高度、后续元素位置都不变 - 不写
top/left却加relative，纯属冗余——除非你明确想让它成为子absolute的锚点 - 用
transform: translate()替代relative + top/left更安全：不触发重排，不影响布局计算
absolute 脱离文档流是硬性规则
position: absolute 一启用，元素立刻从文档流中“注销”，不占空间、不撑高父容器、不影响其他元素排布。它的定位坐标系也彻底切换：不再认自己，而是向上找最近的 position 不为 static 的祖先。
- 找不到非
static祖先？默认锚点就是或视口，所以常“飞到左上角” - 父容器只加
display: flex或overflow: hidden不够——必须显式设position: relative（哪怕不写偏移）才能成为可靠 containing block - 注意隐式 containing block：父级若含
transform、filter或will-change，哪怕它是static，也可能偷偷接管定位上下文，导致子元素参照错对象
为什么不能让 relative 也“脱离”？
这不是实现缺陷，而是语义分工。CSS 的定位模型把“保留占位的微调”和“彻底抽离的精控”拆成两个独立能力：
-
relative的存在价值之一，就是当“定位锚点”——它轻量、稳定、不破坏布局节奏，是absolute子元素最常用的父容器 - 如果
relative也能脱离流，那它和absolute就失去区分意义，且会导致嵌套定位逻辑混乱（比如：谁来承接子元素的相对参照？） - 真需要“动且不留坑”，直接换
absolute；真需要“不动但提供锚点”，就只加position: relative不写偏移
最容易被忽略的是：父容器有没有真正成为“已定位祖先”，不取决于它看起来是不是包裹了子元素，而取决于它是否满足 position ≠ static 这个硬条件——哪怕只加了一行 position: relative，没动过位置，它就已经开始履职了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
