模态框用 top/left 配合 CSS 变量不生效，是因为未设置 position: absolute 或 fixed；推荐改用 transform: translate() 并配合 calc() 和显式单位，同时注意 transform-origin 对齐、避免回流及启用 GPU 合成层提升移动端性能。
模态框用 top/left 配合 CSS 变量不生效？确认定位上下文
直接写 top: var(--modal-top, 50%); left: var(--modal-left, 50%); 很可能没反应，不是变量写错了，而是模态框没处在能响应 top/left 的定位环境中。只有 position: absolute 或 position: fixed 才会认这些偏移值。
常见踩坑点：
-
position写在父容器上（比如.modal-overlay），但变量却设在子元素.modal-content上——子元素没定位，top就是废属性 - 用了
position: relative，但没配top/left，变量自然无处落脚 - 变量作用域错位：变量定义在
:root，但模态框类选择器权重不够，被其他样式覆盖
用 transform: translate() 替代 top/left 更可靠
比起依赖定位上下文的 top/left，transform: translate() 对元素自身生效，不挑父级，也不触发重排，更适合动态调整。
实操写法：
立即学习“前端免费学习笔记（深入）”；
- 变量定义：
:root { --modal-translate-x: 0; --modal-translate-y: 0; } - 模态框样式：
transform: translate(calc(var(--modal-translate-x, 0px), calc(var(--modal-translate-y, 0px)); - JS 动态更新：
modalEl.style.setProperty('--modal-translate-x', '20px');
注意：必须用 calc() 包裹变量，否则 translate() 不识别裸变量；单位（如 px、rem）要显式带上，不能只写数字。
拖拽时位置跳变？transform-origin 和初始偏移要对齐
用户拖动模态框后松手，再拖一次如果出现“瞬移”，大概率是 transform-origin 默认值（50% 50%）和鼠标按下位置不一致导致的。尤其当模态框有内边距或标题栏高度不均时，视觉中心 ≠ 几何中心。
解决方法：
- 给模态框显式设
transform-origin: 0 0;（左上角），然后 JS 中按鼠标相对左上角坐标计算偏移 - 或统一用标题栏作为拖拽句柄，并把
transform-origin设为center top，匹配用户点击区域 - 避免在拖拽过程中反复读写
getBoundingClientRect()——它触发回流，改用offsetLeft/offsetTop或缓存初始位置
移动端 Safari 拖拽卡顿？别只调变量，得管合成层
CSS 变量本身不卡，但频繁更新 transform 值若没走 GPU 合成，iOS Safari 就容易掉帧。单纯加 will-change: transform 反而有害——它会提前创建图层，内存占用高，且不清理会导致页面变慢。
稳妥做法：
- 拖拽开始前，JS 加
element.style.transform = 'translateZ(0)'; - 拖拽结束 100ms 后，用
setTimeout(() => { element.style.transform = ''; }, 100);清除 - 禁用
body滚动（document.body.style.overflow = 'hidden'），防止拖拽时背景滚动干扰手势识别
变量只是传参的管道，真正影响流畅度的是渲染路径是否走合成层、是否触发 Layout/Repaint。这点容易被忽略，但比变量怎么写更关键。
