要实现元素在 left 和 top 属性上产生平滑的过渡效果（transition），关键在于正确设置 CSS 的 position 属性，并启用 transition 动画。虽然 left 和 top 本身可以被过渡，但需要满足一些前提条件。
1. 元素必须是定位元素
只有设置了定位（relative、absolute 或 fixed）的元素，left 和 top 才会生效。普通静态布局（static）下修改这两个值不会产生视觉变化。
示例：.box {
position: relative;
left: 0;
top: 0;
transition: left 0.3s ease, top 0.3s ease;
}
<p>.box:hover {
left: 20px;
top: 10px;
}
2. 启用 transition 过渡效果
为 left 和 top 单独或一起添加 transition，定义动画时长和缓动函数。推荐同时过渡多个属性以保持同步。
说明：- transition: left 0.3s ease; —— 只过渡 left
- transition: all 0.3s linear; —— 过渡所有可动画属性（不推荐用于性能敏感场景）
- transition: left 0.3s, top 0.3s; —— 明确指定，更清晰
3. 触发位置变化的方式
可以通过以下方式触发 left / top 的改变，从而激活 transition：
立即学习“前端免费学习笔记（深入）”；
- 伪类：如 :hover、:focus、:active
- JavaScript 动态添加 class
- CSS @keyframes 配合 animation（非 transition）
document.querySelector('.box').classList.add('moved');
<p>/<em> CSS </em>/
.moved {
left: 50px;
top: 30px;
}
4. 更优替代方案：使用 transform 平移
虽然 left/top 能实现过渡，但浏览器渲染性能不如 transform。建议优先使用 transform: translate(x, y) 实现位移动画。
推荐写法：.box {
position: relative;
transform: translate(0, 0);
transition: transform 0.3s ease;
}
<p>.box:hover {
transform: translate(20px, 10px);
}
优点：GPU 加速、更流畅、无重排（reflow）。
基本上就这些。如果坚持用 left/top，确保元素已定位并正确设置 transition。但从现代前端实践看，transform 是更高效的选择。
