position: relative 本身不触发位移动画，它仅建立定位上下文，动画需依赖显式设置并可插值的 top/left 等偏移属性或 transform。
为什么 position: relative 本身不触发位移动画
position: relative 只是让元素“相对自身原本位置”建立定位上下文，并不会改变文档流中的占位，也不会自动产生可动画的偏移效果。真正能被 transition 或 @keyframes 驱动的，是它的 top、right、bottom、left 这些偏移属性——但前提是这些属性**有初始值且被显式设置**。
常见误区是只写 position: relative，却不设 top: 0 或 left: 0，导致后续 top: 20px 的过渡无效（浏览器认为从“未定义”到“20px”不可插值）。
- 必须显式初始化偏移值，例如：
top: 0; left: 0; - 仅靠
position: relative不足以开启动画，它只是为子元素的position: absolute提供参考框 - 若目标是“相对父容器移动”，直接用
transform: translate()更高效、更稳定
如何用 relative + absolute 实现父子联动动画
典型场景：父容器设为 position: relative，子元素设为 position: absolute，再对子元素的 top/left 做过渡。这时父容器的 relative 不参与动画，只提供定位锚点。
.container {
position: relative;
width: 300px;
height: 200px;
}
.box {
position: absolute;
top: 10px;
left: 10px;
transition: top 0.3s, left 0.3s;
}
.box:hover {
top: 50px;
left: 80px;
}
- 父容器
.container必须有明确宽高或内容撑开，否则absolute子元素可能定位错乱 - 子元素脱离文档流，不影响父容器尺寸，适合做悬浮、提示、弹层等
- 避免同时对
top和transform动画，会造成合成层冲突和闪烁
relative 容器内 absolute 元素动画的性能陷阱
当 absolute 子元素频繁改变 top/left，浏览器每次都要重新计算布局（layout）+ 绘制（paint），尤其在低性能设备上卡顿明显。这不是 relative 的问题，而是偏移属性本身的代价。
- 优先用
transform: translate()替代top/left，它只触发合成（composite），不触发布局 - 如果必须用
top/left，加will-change: top, left提前告知浏览器（但别滥用） -
position: relative父容器若本身也在动画（比如缩放），会强制子元素重绘，应避免嵌套动画
什么情况下该放弃 relative + absolute 改用其他方案
不是所有“相对移动”都适合靠定位属性实现。比如需要响应式位移、滚动跟随、或与 Flex/Grid 布局协同时，硬套 absolute 反而增加维护成本。
- 简单平移/缩放/旋转 → 直接用
transform+transition，无需relative - 需要随父容器尺寸自适应的位置 → 用
margin或 Grid 的justify-self/align-self - 要固定在视口某处（如右下角按钮）→ 用
position: fixed，而非依赖relative父级 - 动画需 JS 动态控制坐标 → 用
getBoundingClientRect()计算后设transform，比反复改left/top更可靠
真正容易被忽略的是：很多人以为加了 position: relative 就“准备好动画了”，其实它只是个定位上下文开关，连动画的边都没碰到。关键永远在——你动的是哪个属性，以及这个属性是否可被浏览器高效追踪和插值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
