left: 100px 不生效主因是单位前空格、父容器未设 position: relative 或 JS 覆盖初始值；应使用带单位的 CSS 变量（如 --init-left: 240px）并显式写入 style，配合 trim() 和 fallback 处理，确保首帧渲染准确。
为什么直接写 left: 100px 有时不生效？
因为初始 left 和 top 值可能被 JS 动态覆盖、被父容器定位上下文干扰，或 CSS 解析失败（比如写了 left: 100 px——空格导致无效）。更隐蔽的问题是：页面加载时 JS 还没执行，但用户已看到元素“闪”到左上角，说明 CSS 层面的初始位置没兜住。
用 CSS 变量不是为了炫技，而是把初始坐标从硬编码解耦出来，让 JS 读取、复用、甚至运行时修改都更可控。
-
:root或组件级选择器里定义变量，例如--init-left: 240px、--init-top: 180px - 拖拽元素的
style必须显式用left: var(--init-left)，不能只靠 JS 设置 —— 否则首帧渲染会 fallback 到auto - 变量值必须带单位（
px、%），var(--init-left, 0)的 fallback 也得带单位，否则无效 - 避免在
:hover或媒体查询里覆盖这些变量，否则拖拽启动前位置就变了
如何让 JS 安全读取并应用 CSS 变量中的初始位置？
别信 getComputedStyle(el).left —— 它在首次渲染时大概率返回 auto，尤其老浏览器。正确路径是读变量，再设内联样式。
- 用
getComputedStyle(document.documentElement).getPropertyValue('--init-left')读根变量；若变量在局部作用域（如.mydiv），需传入对应元素节点 - 读出来的值带空格和单位（如
" 240px "），用.trim()清理，再赋给el.style.left - 务必检查返回值是否为空字符串，空则 fallback 到默认值（如
'0px'），否则style.left = ''相当于删掉该声明，退回到auto - 初始化逻辑必须在 DOM 加载完成之后、拖拽监听绑定之前执行，否则 JS 设置的位置会被后续拖拽逻辑重置
父容器 position: relative 没加，CSS 变量白定义？
是的。只要拖拽元素是 position: absolute，它的 left/top 就依赖最近的「已定位祖先」。如果父容器是 position: static（默认），那变量值最终是相对于 计算的 —— 页面一滚动、一缩放，位置就飘。
立即学习“前端免费学习笔记（深入）”；
- 给直接父容器加
position: relative是强制锚点，不是可选项 - 不要用
position: sticky代替 —— 它响应滚动，和拖拽逻辑冲突，行为不可控 - 如果父容器本身有
transform（比如scale(0.9)），它会创建新的包含块，此时absolute元素的left/top会相对于这个 transform 容器计算，变量值就得按比例缩放（比如原--init-left: 240px，缩放 0.9 后应设为266.67px） - 移动端 Safari 对含
transform的定位容器兼容性差，建议优先用position: relative+overflow: hidden控制裁剪
单位写错、变量名拼错、父容器漏定位——哪个最容易忽略？
单位写错。资料里反复强调：left: 240 px（带空格）和 left: 240px（无空格）是两回事，前者完全无效，浏览器静默丢弃，控制台也不报错。变量名拼错至少会在 getPropertyValue 返回空字符串时暴露，父容器漏定位还能靠视觉偏移发现，但单位空格问题，元素就是“不动”，你盯着 DevTools 看半天 style 面板，以为逻辑错了，其实只是少了个字符。
所以每次写完变量定义，立刻在浏览器里打开 DevTools，选中元素，看 Computed 标签页里 left 是否真实解析成了像素值；如果不是，回过头检查变量值字符串里有没有多余空格、单位是否紧贴数字。
