position属性本身不可动画化，真正可过渡的是top、left、right、bottom和transform等偏移属性，前提是元素已设为relative/absolute/fixed；优先用transform实现更流畅的位移动画。
position 变化本身不会触发 CSS 过渡
直接修改 position 的值（比如从 static 改成 absolute）不会触发动画，因为 position 属性本身不可动画化。浏览器不支持对 position 做插值计算，transition 对它完全无效。
真正能过渡的是 top、left、right、bottom、transform 这些可动画属性——但前提是元素已处于可定位状态（即 position 不是 static）。
- 先设
position: relative或absolute，再用transition控制top/left等偏移量 - 若在 JS 中动态切换
position值（如从static→fixed），需确保偏移属性在切换前后都存在且可被过渡 - 常见翻车点：样式里没写初始
top值，却想过渡到top: 20px—— 浏览器会从auto插值，结果无动画
用 transform 替代 top/left 实现更流畅的过渡
当目标是“移动位置 + 过渡”时，优先用 transform: translate() 而非 top/left。前者走合成层，性能更好，且不受文档流影响；后者可能触发重排（layout），尤其在频繁变更时卡顿明显。
注意：使用 transform 时，position 仍需设为 relative、absolute 或 fixed 才能脱离正常流，否则 translate 只是视觉位移，不影响其他元素布局。
立即学习“前端免费学习笔记（深入）”；
-
position: relative+transform: translateX(100px)：元素原占位保留，仅自身平移 -
position: absolute+transform: translateY(-50%)：常用于居中，且过渡顺滑 - 避免混用：
top: 0和transform: translateY(10px)同时存在时，最终位置是两者叠加，容易误判动画终点
sticky 定位与 transition 的兼容性问题
position: sticky 本身不能被 transition 动画，但它进入/离开粘性状态时，内部偏移（如 top）的变化可以被过渡——前提是该偏移值在 sticky 激活前后有明确的数值变化，且已声明 transition。
但实际中多数浏览器（Chrome、Firefox）目前**不支持**对 sticky 元素的 top 做过渡：滚动时 top 在 auto 和具体数值间切换，而 auto 无法插值。
- 可行方案：用
transform模拟粘性效果（监听 scroll，JS 控制transform），再配transition - 或改用
position: fixed+ JS 控制显隐和位移，手动管理过渡时机 - 检查是否真需要 sticky：如果只是“吸顶+淡入”，
opacity和transform组合往往更可控
transition 触发时机与 reflow 的隐性依赖
即使写了 transition: top 0.3s，若通过 JS 批量修改样式（比如先改 position 再改 top），浏览器可能合并两次操作，导致过渡不触发——因为中间没有强制 layout。
解决方法是在修改 position 后、修改 top 前，读取一次触发 layout 的属性（如 offsetHeight），强制浏览器计算当前样式，再应用新偏移值。
element.style.position = 'absolute'; // 强制 layout，让 position 生效 void element.offsetHeight; element.style.top = '100px';
- 不加这一步，
top可能直接跳变，过渡失效 - 现代方案可用
getComputedStyle读任意属性（如getComputedStyle(element).top），效果相同 - CSS-in-JS 库（如 Emotion）或框架（React）中，这类时机问题更隐蔽，建议优先用 class 切换 + CSS 预定义状态
真正难的不是写 transition，而是搞清哪些值在何时被浏览器视为“可插值”、哪些变化会意外跳过动画。position 相关过渡，核心永远落在“偏移属性是否有确定的起始/结束数值”以及“浏览器是否能拿到这两个数值去插值”。
