relative元素视觉偏移但文档流位置不变，absolute脱离文档流且依赖最近非static祖先定位，transform位移更安全高效。
relative 不脱离文档流，但“原地留坑”
设了 position: relative 的元素，视觉上能用 top/left 偏移，但它在文档流里原来占的位置一动不动——就像人站起来走了，椅子还留在原地。其他元素照常排布，完全感知不到它动过。
- 适合微调：按钮图标右移 2px、下划线往下压 1px、tooltip 紧贴文字底部
- 不撑高父容器：哪怕你
top: 100px，父div高度还是按它“没动时”的位置算 - 别乱加：没写
top/left却设了relative，纯属冗余，还可能意外成为子absolute的锚点
absolute 必须有“爹”，否则就认 body
position: absolute 一上身，元素立刻从文档流消失，不占空间、不影响别人布局。但它定位的起点不是自己，而是往上找第一个 position 不是 static 的祖先——找不到？那就直接相对于视口（body）左上角定位，这也是为什么它常突然“飞到页面顶上”。
- 必须配对使用：父容器加
position: relative（最轻量安全），子才肯乖乖相对它定位 - 常见翻车现场：
.popup { position: absolute; top: 0; right: 0; }，但父级没设定位 → 弹窗贴着浏览器右上角，而不是按钮旁边 - 注意隐式锚点：父级若用了
transform或filter，哪怕它是static，也可能悄悄创建新的 containing block，让子absolute参照错了对象
想偏移又不想搞乱布局？优先用 transform
如果目标只是小范围挪动、居中、悬停上浮，transform: translate() 比 relative + top/left 更干净，也比 absolute 更省心——它不改变文档流，不触发重排，还能丝滑过渡动画。
- 真·居中写法：
transform: translate(-50%, -50%)配合top: 50%; left: 50%，比margin: -宽高一半更可靠 - 图标微调、卡片 hover 抬升、加载动画位移，都该先想
transform，别一上来就加定位 - 兼容性够用：IE10+、所有现代浏览器都支持，比某些
z-index层叠问题好对付得多
快速自查 absolute 为啥乱了
打开开发者工具，选中错位元素，看 Computed 面板里的 position 和 offsetParent ——它真正参照的是谁，一眼就能确认。
- 检查最近已定位祖先是否存在：父级是否漏写了
position: relative - 确认该祖先尺寸合理：比如父
div高度为 0，子absolute虽然“相对它”，但实际还是飘在空中 - 留意
overflow: hidden：它不会影响定位参照，但会把溢出的absolute元素裁掉，造成“明明定位对了却看不见”的假象
定位机制本身不复杂，但“参照系”这个隐性链条一旦断掉或接错，表现就会完全失控。很多人卡在“为什么我写了 top: 0 却没贴顶”，其实问题不在那行代码，而在它上面三层没设 relative 的父容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
