relative不脱离文档流、原位置占位不变，absolute脱离文档流、依赖最近非static祖先定位；前者微调视觉位置不影响布局，后者精确层叠但易因锚点缺失而错位。
relative 和 absolute 的核心区别不在“怎么写”，而在“谁管它”和“它占不占位”——这两点直接决定布局是否失控、后续维护是否踩坑。
relative 元素为什么“动了却像没动”？
设了 position: relative 的元素，top/left 移动的是视觉位置，但文档流里那个“影子”还在原地。其他元素完全按这个影子排布，就像它根本没动过。
- 常见错误现象：
div加了relative和top: 20px，结果下方内容没跟着下移，看起来“重叠”了——其实是它自己上浮，而下面元素仍认它的原始位置 - 使用场景：微调按钮图标、让
tooltip紧贴文字底部却不撑高父容器、给absolute子元素当“锚点” - 容易踩的坑：只加
relative却不写top/left，纯属冗余；更危险的是，它会意外成为子absolute的定位父级，哪怕你本意只是想加个z-index
absolute 元素为什么总“飞到页面顶上”？
position: absolute 一加上，元素立刻从文档流消失，也不再占空间。但它不会凭空定位——它往上找第一个 position 不是 static 的祖先（即 relative、absolute 或 fixed），找不到就直接相对于 body 定位。
- 常见错误现象：
.popup { position: absolute; right: 0; top: 100%; }，但父容器没设position: relative→ 弹窗出现在浏览器右上角，而不是按钮下方 - 参数差异：
top: 0对relative是“从自己原来位置往下挪0px”，对absolute是“贴到定位父级的顶部边界” - 性能影响：频繁改变
absolute元素的top/left会触发重排；用transform: translate()替代更高效
什么时候该用 transform 而不是 relative/absolute？
如果目标只是小范围偏移、居中、悬停上浮，transform: translate() 比 relative + top/left 更干净，也比 absolute 更省心。
立即学习“前端免费学习笔记（深入）”；
- 它不改变文档流，不触发重排，动画也更丝滑
- 它不受祖先定位上下文影响，行为可预测性强
- 注意：
transform不影响box-shadow的渲染层级，也不改变元素的几何尺寸（比如getBoundingClientRect()返回值不变）
真正容易被忽略的，是“隐式 containing block”：哪怕父级是 static，只要用了 transform 或 filter，也可能悄悄创建新的定位上下文，导致子 absolute 参照错了对象——这种 bug 很难一眼看出来。
