relative不脱离文档流但保留原占位，absolute脱离文档流且依赖最近非static祖先定位；二者参照物不同、对布局影响不同、对子元素定位上下文作用也不同。
relative 和 absolute 的核心区别不在“相对”或“绝对”字面，而在于三件事：是否保留原始占位、参照物是谁、会不会意外影响子元素定位上下文。
relative 不脱离文档流，但“原地留坑”
设了 position: relative 的元素，视觉上能用 top/left 移动，但它在文档流里原来的位置一动不动——就像人起身走了，椅子还留在原地。其他元素完全感知不到它动过。
- 适合微调：按钮图标右移
2px、下划线压低1px、tooltip 紧贴文字底部不撑高父容器 - 哪怕你写
top: 100px，父div高度还是按它“没动时”的位置算 - 没写
top/left却设了relative，纯属冗余，还可能意外成为子absolute的锚点（比如父级没设定位，子元素却以它为参照）
absolute 脱离文档流，必须找“爹”
position: absolute 一上身，元素立刻从文档流消失，不占空间、不影响别人布局。但它定位的起点不是自己，而是往上找第一个 position 不是 static 的祖先——找不到？那就直接相对于 body 左上角定位。
- 常见错误现象：
button旁弹出菜单，父级没设定位 → 弹窗贴着浏览器右上角，而不是按钮旁边 - 某些 CSS 属性（如
transform、filter）哪怕父级是static，也可能悄悄创建新的 containing block，让子absolute参照错了对象 - 写了
absolute就得配left或top，否则默认落在原位（但已脱离流），容易误判位置
想偏移又不想搞乱布局？优先用 transform: translate()
如果目标只是小范围挪动、居中、悬停上浮，transform: translate() 比 relative+top/left 更干净，也比 absolute 更省心：
立即学习“前端免费学习笔记（深入）”；
- 它不改变文档流，不触发重排，还能丝滑过渡动画
- 和
relative不同，它不会让元素变成子absolute的定位上下文 - 和
absolute不同，它不需要找“爹”，也不怕父级overflow: hidden截断
真正难的不是记住定义，而是每次写 position 前问一句：这个偏移要不要保留原始占位？参照物我是不是真清楚？子元素会不会被我无意中“收编”成它的定位上下文？这三个问题没过一遍，position 就容易用错。
