根本原因是top/left对position:static无效，必须先设置position为absolute、relative或fixed；推荐用CSS变量统一管理偏移值并配合calc()和transform提升响应性与性能。
为什么直接在媒体查询里改 top/left 会失效
根本原因不是媒体查询没生效，而是 top 和 left 对 position: static（默认值）完全无效。如果你的基础样式里没写 position: absolute 或 relative，那后续所有坐标设置都白搭。
常见错误现象：缩放窗口后元素纹丝不动；开发者工具里看到 top 值变了，但视觉没反应。
- 检查 computed 样式中的
position是否为absolute、relative或fixed - 确认没有更高优先级规则覆盖，比如内联样式、
!important，或更具体的选择器如.modal .tooltip - 父容器若设了
overflow: hidden，绝对定位元素可能被裁剪，造成“没动”的错觉
用 :root 定义 CSS 变量统一管理偏移值
把坐标逻辑抽出来集中维护，避免多个媒体查询分散写死，也方便后续 JS 动态更新。
基础样式中直接使用变量，媒体查询只负责改变量值：
立即学习“前端免费学习笔记（深入）”；
:root {
--pos-x: 0;
--pos-y: 0;
}
<p>.tooltip {
position: absolute;
left: var(--pos-x);
top: var(--pos-y);
}</p><p>@media (max-width: 480px) {
:root {
--pos-x: 10px;
--pos-y: 8px;
}
}- 变量名建议语义化，比如
--tooltip-offset-x比--pos-x更易维护 - 避免在
:root中混用单位（如--pos-x: 5vw + 10px），旧版 Safari 不支持 calc() 内混合单位 - 若需响应滚动或交互，JS 可直接操作
document.documentElement.style.setProperty('--pos-x', '20px')
calc() + 视口单位替代固定像素的坑
硬写 left: 50px 在小屏上容易溢出，top: 100px 在折叠屏上可能遮挡内容。用 calc() 混合单位能提升适配能力，但兼容性要小心。
- 推荐写法：
left: calc(50% - 200px)（实现宽 400px 元素水平居中） - 慎用：
top: calc(10vh + 2rem)—— iOS 地址栏收起/弹出时vh会跳变；某些安卓 WebView 中100vh超出可视区域 - 避免：
calc(10px + 1em + 1vh)，Safari 13 以下不支持多单位混合计算
动画中用 transform 替代 top/left 的必要性
频繁调整位置（比如悬停位移、滚动跟随）时，直接改 top/left 会触发 layout，尤其在低端设备上卡顿明显；transform: translate() 走合成层，性能更好。
- 静态定位仍建议用
top/left，语义清晰、行为可预测 - 若加了
transition，初始状态和目标状态必须都用transform，否则首次渲染会跳变 - 注意参考系差异：
transform基于元素自身原点，而top/left相对于包含块；调试时打开浏览器开发者工具的“盒模型”叠加层对比更直观
真正难的不是怎么写变量，而是变量该定义在哪一层——是全局 :root，还是组件级 .dropdown，抑或通过 JS 注入动态值。不同层级混用时，优先级和继承链容易失控，这点比语法本身更值得花时间理清。
