动画首选 transform: translate() 而非 top/left，因前者不触发重排、性能更优；absolute 定位需父容器设 relative；fixed 元素动画应避免 top/left，改用 transform；读取坐标时，transform 动画用 getBoundingClientRect()，top/left 动画可用 offsetTop/offsetLeft。
动画中用 position: absolute 是最常见起点
想让元素动起来又不挤占文档流，position: absolute 几乎是默认选择。它把元素从正常布局中抽离，后续通过 top、left 等偏移属性控制位置，这些属性正好能被 CSS 动画驱动。
注意：父容器必须有 position: relative（或 absolute/fixed），否则 absolute 元素会向上找最近的定位上下文，容易飘到页面外边去。
-
top和left是可动画属性，但性能不如transform: translate() - 如果只做位移，优先用
transform: translateX()+translateY()，避免触发重排 - 别在动画里同时写
left: 100px和transform: translateX(50px)，行为不可预测
@keyframes 里写 top/left 还是 transform？
两者都能动，但效果和开销不同。用 top 会触发浏览器重排（layout），而 transform 只走合成层（composite），更顺滑，尤其在低端设备上。
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
如果非要用 top，比如要配合 JS 动态读取位置，得接受帧率可能掉到 30fps 的风险。
立即学习“前端免费学习笔记（深入）”；
-
transform动画默认开启硬件加速，但过度使用will-change: transform可能增加内存压力 -
top/left在 IE9+ 支持良好；transform在 IE10+ 才可靠（IE9 需加-ms-前缀） - 动画中混用
top和transform会导致最终位置计算异常，不要这么做
动画过程中需要 JS 拿到实时坐标怎么办？
用 getBoundingClientRect() 最稳妥。它返回的是相对于视口的位置，不受 transform 影响 —— 注意：这是个常见误解。实际上，transform 会影响 getBoundingClientRect() 返回值，但不会影响 offsetTop/offsetLeft（后者只看静态 HTML 布局）。
所以如果你靠 offsetTop 判断位置，而动画用了 transform，数值就完全对不上。
- 动画用
transform→ 读位置用getBoundingClientRect() - 动画用
top/left→ 可用offsetTop/offsetLeft，但注意父级offsetParent是否为预期元素 - 监听
animationiteration或animationend事件时，坐标值是动画结束瞬间的，不是每一帧的
fixed 定位 + 动画的坑比你想的多
position: fixed 元素脱离的是视口，不是父容器。这意味着它的 top/left 是相对于屏幕左上角算的，滚动时不会变 —— 听起来很稳，但动画一加就容易出问题。
比如你设了 top: 20px 并用动画改它，用户滚动页面后，元素可能突然“跳”一下，因为 fixed 元素的定位基准没变，但视觉参照变了。
- 避免对
fixed元素做top/left动画，改用transform更安全 - 如果必须响应滚动做动画，用
IntersectionObserver+transform，别硬绑scroll事件 -
fixed元素在 iOS Safari 中可能被键盘弹起遮挡，动画期间尤其难调试
实际用的时候，定位方式决定了动画起点和坐标系，而动画属性决定了性能和可控性。这两者没所谓“最佳搭配”，只有“当前场景下少踩坑的组合”。