媒体查询中top/left无效是因为未设置position属性；必须先声明position: absolute/relative/fixed，否则偏移值被忽略；正确写法是基础样式设position，媒体查询仅覆盖top/left或改用transform提升性能。
媒体查询里改 top/left 没反应？八成是漏写了 position，不是媒体查询失效，而是偏移属性根本没生效。
基础样式必须先声明 position
绝对定位元素的 top、left 等偏移值只对 position: absolute、relative 或 fixed 有效；static（默认值）下写再多 top: 10px 都会被浏览器忽略。
- 错误写法：
.box { top: 20px; left: 15px; }—— 没设position，无效 - 正确写法：
.box { position: absolute; top: 20px; left: 15px; }，媒体查询里只覆盖top/left - 若父容器也要参与响应，记得给它加
position: relative，否则absolute子元素可能相对body定位，导致小屏错位
优先用 transform 替代 top/left 做动态偏移
频繁修改 top/left 会触发 layout，滚动或动画中容易卡顿；transform: translate() 走合成层，性能更好，且过渡更顺滑。
- 基础样式写
top: 0; left: 0;，媒体查询里只改transform: translateX(-10px) translateY(5px) - 注意参考系差异：
translate()是以元素自身为原点，而top/left是相对于包含块，调试时打开 DevTools 的“盒模型”叠加层对比更直观 - 如果加了
transition，初始状态也得用transform，否则首次渲染会跳变
用 calc() + 视口单位做真正响应的偏移
固定像素（如 left: 30px）在小屏上易溢出，大屏上又显局促；calc() 混合视口单位（vw、vh）和相对单位（rem、%）才能随屏幕线性缩放。
立即学习“前端免费学习笔记（深入）”；
- 示例：
left: calc(50% - 200px);实现宽 400px 元素水平居中，不依赖 JS -
top: calc(10vh + 1.5rem);混合视口高度与字体单位，适配横竖屏切换 - 避免混用不兼容单位：
calc(10px + 1em + 1vh)在旧版 Safari 可能解析失败 -
100vh在某些安卓 WebView 中会超出实际可视区域；iOS 地址栏收起/弹出时，vh基于 layout viewport，可能跳变
多元素联动时用 CSS 自定义属性统一管理
弹窗、遮罩、箭头等需协同响应时，分散写十几条媒体查询极易遗漏或冲突；自定义属性能把坐标逻辑抽出来集中维护。
- 在
:root定义默认值：--pos-x: 0; --pos-y: 0;，元素用left: var(--pos-x); top: var(--pos-y); - 媒体查询里只更新变量：
@media (max-width: 480px) { :root { --pos-x: 10px; --pos-y: 5px; } } - 配合
transition: left, top或transform一起用，确保所有联动元素同步动画
最常被忽略的是：父容器的 overflow: hidden 会裁剪绝对定位子元素，造成“没动”的假象；还有 transform、filter、opacity 小于 1 的父级会创建新包含块，让 fixed 元素突然失准——这些都得靠 DevTools 的 Computed 面板查 Containing Block 才能快速定位。
