<p>top和left用CSS变量失效是因为定位属性必须带单位，而变量若定义为--offset: -8（无单位）则被浏览器视为无效值；正确做法是变量自带单位如--offset: -8px，或配合calc()使用如top: calc(var(--offset) * 1px)。</p>
为什么 top 和 left 用 CSS 变量会失效？
直接写 top: var(--offset-y); 往往没反应，不是变量没生效，而是 CSS 中 top 等定位属性只接受带单位的值（如 12px、-0.5rem），而如果你在 :root 或组件里定义了 --offset-y: -8（漏掉单位），浏览器会把它当无效值丢弃——控制台看不到报错，但计算值就是 auto。
- 必须在定义变量时就带上单位：
:root { --offset-y: -8px; --offset-x: 4px; } - 不能靠 JS 动态拼单位（比如
el.style.setProperty('--offset-y', y + 'px')是 OK 的，但el.style.setProperty('--offset-y', y)就不行） - 如果偏移量需响应式变化（比如小屏左偏移少一点），用
@media覆盖变量值，而不是改top的 calc 表达式
如何用 calc() 组合多个偏移来源？
悬浮工具栏常要叠加触发元素位置、滚动偏移、安全区（env(safe-area-inset-bottom)）等，全堆在 top 里写死不现实，得靠 calc() 拿变量做运算。
- 基础写法：
top: calc(var(--trigger-top) + var(--scroll-offset) + var(--safe-bottom)); -
--trigger-top通常由 JS 注入（getBoundingClientRect().top + window.scrollY），注意它已是像素值，别再加px -
--safe-bottom建议设为env(safe-area-inset-bottom, 0px)，避免 iOS 下被刘海遮住 - 避免嵌套 calc：不要写
calc(calc(var(--a) + var(--b)) + var(--c))，一层就够了
hover 时动态调整偏移量，为什么 transition 不生效？
CSS 变量本身不触发重排/重绘，所以光改 --offset-y，即使写了 transition: top 0.2s，top 属性值其实没变——它依赖的变量变了，但浏览器不会自动把变量更新映射到可过渡属性上。
- 正确做法：让
top和left直接绑定变量，并确保这些变量在 hover 时被修改（比如用:hover选择器覆盖变量值） - 示例：
:root { --offset-y: 0px; } .toolbar:hover { --offset-y: -12px; } .toolbar { top: calc(var(--offset-y) + 16px); transition: top 0.2s ease; } - 如果变量由 JS 控制，记得用
el.style.transition = 'top 0.2s'，否则内联样式会覆盖 CSS 中的 transition
移动端 touch 设备下偏移量抖动怎么办？
手指悬停（hover）在 touch 设备上不可靠，很多浏览器根本不会触发 :hover，导致基于 hover 的偏移切换失效；更糟的是，touchstart 后立刻读取 getBoundingClientRect()，可能拿到旧布局位置（尤其页面刚滚动完）。
立即学习“前端免费学习笔记（深入）”；
- 别依赖
:hover做核心偏移逻辑，改用 class 切换（.toolbar--active）+ JS 控制变量 - 读取位置前加
requestAnimationFrame确保布局已更新：el.addEventListener('touchstart', () => { requestAnimationFrame(() => { const rect = el.getBoundingClientRect(); el.style.setProperty('--trigger-top', `${rect.top + window.scrollY}px`); }); }); - 安卓 WebView 和旧版 Safari 对
env()支持差，--safe-bottom要 fallback 到0px，别用0
