元素随鼠标移动位移异常的根本原因是坐标系错配：应统一使用clientX/clientY配合position:fixed，滚动容器需用getBoundingClientRect()换算局部坐标，移动端须监听touchmove并取touches[0].clientX。
元素随鼠标移动产生位移，本质是坐标系错配或定位方式不匹配——不是“动得不对”，而是“参考系没对齐”。直接改 top/left 或用 transform 都可能出偏移，关键在选对坐标源和定位上下文。
mousemove 里该用 clientX/clientY 还是 pageX/pageY？
必须用 clientX/clientY，尤其当目标元素需要固定跟随鼠标（比如自定义光标、悬浮提示）。pageX/pageY 包含滚动偏移，一旦页面滚动，position: absolute 元素就会被“拖走”；而 clientX/clientY 是视口内坐标，天然匹配 position: fixed 定位。
- 如果元素设
position: fixed，只接受clientX/clientY，否则滚动时位置跳变 - 如果监听的是某个滚动容器（如
overflow: auto的 div），则必须用该容器的getBoundingClientRect()换算局部坐标，不能直接用clientX - 移动端要同时监听
touchmove并取e.touches[0].clientX，别漏掉
为什么加了 top/left 还是不动？
因为 top/left 只对已定位元素生效。如果元素仍是 position: static（默认值），写 element.style.top = '10px' 浏览器会静默忽略，不报错也不执行。
- 先确保元素有
position: relative（微调自身位置）或position: absolute（脱离文档流）或position: fixed（锁定视口） - 若用
absolute，检查父容器是否设置了position: relative—— 否则它会向上找最近的非static祖先，甚至落到<html>上，位置完全不可控 - 避免混用
transform和top/left：后者会被前者覆盖，除非你手动合并计算
用 transform: translate() 还是 top/left？
优先用 transform: translate()，性能更稳，尤其高频移动场景。直接改 top/left 触发 Layout（重排），帧率容易掉；translate() 只走 Composite 阶段，GPU 加速更顺滑。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
follower.style.transform = `translate(${e.clientX}px, ${e.clientY}px)` - 注意：如果元素已有
transform（比如旋转或缩放），不能直接覆盖，得用getComputedStyle(follower).transform解析后再合并 - 要让光标中心对准鼠标点？直接在 translate 里减去半宽高：
translate(${e.clientX - width/2}px, ${e.clientY - height/2}px) - 记得加
pointer-events: none，否则跟随元素会挡住下方点击
背景图随鼠标位移总飞出去怎么办？
直接把 clientX 当成 background-position 值是最大误区。原始坐标范围太大（0–数千像素），而背景图偏移通常只需 ±10–50px，必须归一化再缩放。
- 先用
element.getBoundingClientRect()获取容器可视区域宽高 - 算相对坐标：
(e.clientX - rect.left) / rect.width→ 得到 0–1 的横轴比例 - 映射为偏移量：
-(ratioX * 40)（负号才能实现“鼠标右移→背景左移”的视差感） - 比
background-position更优的是用伪元素 +transform: translate3d()，配合will-change: transform防闪烁
最易被忽略的点：所有坐标换算都依赖 DOM 就绪。监听 mousemove 前，务必确认目标元素已挂载，否则 getBoundingClientRect() 返回 {width: 0, height: 0}，后续全错。
