calc() 定位失效主因是未声明非static的position；需基础样式设position: absolute/relative/fixed，媒体查询仅覆盖偏移量，同时注意单位兼容性、vh缺陷及优先使用transform提升性能。
calc() 能直接算出 top、left 等定位值，但必须搭配已声明的 position，否则无效。
为什么写了 calc() 却没动？
最常见的情况是：CSS 里只写了 @media (max-width: 768px) { .box { top: calc(50vh - 20px); } }，但基础样式漏了 position: absolute（或 relative/fixed）。top 和 left 对 position: static（默认值）完全不生效。
- 务必在基础样式中显式声明
position，媒体查询只负责覆盖偏移量 - 检查是否被内联样式、
!important或更具体的选择器（如.container .box）覆盖 - 确认父容器没有
overflow: hidden，否则绝对定位元素可能被裁剪，看起来“没动”
calc() 定位常用写法与单位陷阱
calc() 支持混合单位，但有硬性规则：加减运算中单位必须兼容，乘除只允许一个带单位的值参与（如 calc(100% / 3) 合法，calc(50% * 2em) 会失效）。
- 水平居中一个宽
200px的元素：left: calc(50% - 100px)（注意空格不能省） - 顶部留出导航栏高度（
70px）再垂直居中：top: calc(50vh - 35px) - 避免混用不兼容单位：
calc(10px + 1em + 1vh)在旧版 Safari 可能解析失败 -
100vh在部分安卓 WebView 中会超出可视区域；iOS 地址栏收起/弹出时，vh值可能跳变
比 top/left 更推荐：用 calc() 配合 transform
频繁修改 top/left 会触发浏览器 layout，滚动或动画中容易卡顿；transform: translate() 走合成层，性能更好，且参考系更可控。
- 基础定位写
top: 0; left: 0;，媒体查询里只改transform: translateX(calc(-50% - 20px)) - 注意差异：
translateX(-50%)是基于元素自身宽度，而left: 50%是相对于包含块宽度 - 如果加了
transition，初始状态也必须用transform，否则首次渲染会跳变
多元素协同响应？优先用 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; } } - 调试时可直接在开发者工具中临时修改
--pos-x值，实时观察效果，比反复改媒体查询快得多
真正难的不是写出 calc 表达式，而是判断该用 top 还是 transform、该用 vh 还是 %、以及什么时候该把逻辑交给 CSS 变量而不是硬编码——这些选择直接影响后续维护成本和跨端稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
