用 transform 替代 top/left 能减少布局跳动，因其仅触发重绘或 GPU 合成，不触发重排、不改变文档流、不影响其他元素布局。
为什么用 transform 替代 top/left 能减少布局跳动
响应式中频繁修改 top、left 等定位属性会触发浏览器重排（reflow），尤其在滚动或 resize 时，元素尺寸、位置变化牵连父容器和兄弟节点，造成肉眼可见的“跳动”。而 transform: translate() 属于合成层操作，只触发重绘（repaint）甚至直接由 GPU 处理，不改变文档流，也不影响其他元素布局。
关键区别在于：position: relative + top 仍占原始位置空间，但视觉位移后可能与其他元素产生碰撞或触发父容器高度重算；transform: translate() 是纯视觉偏移，原始占位不变，后续布局不受干扰。
transform 在媒体查询中如何安全切换位移值
直接在媒体查询里写 transform: translateX(20px) → translateX(0) 是可行的，但要注意两点：一是必须为元素设置 transition: transform 0.3s ease 才有平滑效果；二是避免同时混用 top 和 transform，否则位移会叠加，导致意外偏移。
- ✅ 正确：统一用
transform控制所有位移，包括 hover、media query、JS 动态调整 - ❌ 错误：媒体查询设
top: 10px，JS 又加transform: translateY(-5px)—— 实际偏移是两者相加，且top触发重排 - ⚠️ 注意：IE10+ 支持
transform，但 IE9 需要-ms-transform，若需兼容，建议降级为 JS 检测 + class 切换，而非依赖 CSS 媒体查询直接改transform
配合 position: absolute 时，transform 的参考点容易被忽略
当元素已设 position: absolute，再加 transform: translate()，位移是相对于自身原点（即绝对定位后的左上角），不是相对于父容器。这本身没问题，但容易和“想让元素居中”这类需求混淆 —— 比如用 left: 50% + transform: translateX(-50%) 是经典居中法，但如果父容器宽高动态变化（如响应式侧边栏收起），left: 50% 的基准变了，而 transform 仍按自身宽高算，结果可能偏移。
