position: absolute 的定位参考系是最近的非 static 定位祖先；若父容器未设 position: relative/absolute/fixed，则回退至 <html>，导致卡片偏移。
为什么 position: absolute 必须配合非 static 父容器？
直接给悬浮卡片设 position: absolute 却发现它飞到整个页面左上角？那是因为 absolute 的定位参考系是「最近的非 static 定位祖先」。如果父元素没设 position: relative（或 absolute/fixed），浏览器就会一路往上找，最终以 <html> 为基准——卡片自然脱离预期区域。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给卡片的直接父容器加
position: relative，不需宽高、不需偏移，仅作定位上下文 - 避免在父容器上同时设
transform（如scale(1.05)），某些浏览器会意外创建新的包含块，导致定位偏移 - 若父容器本身是
flex或grid布局，仍需显式加position: relative，不能依赖布局模式自动提供定位上下文
用 mousemove 计算坐标时，该用 clientX/clientY 还是 pageX/pageY？
关键看卡片是否随滚动移动。如果卡片要始终“粘”在鼠标指针下方（比如工具提示），必须用 clientX/clientY；若用 pageX/pageY，滚动页面后卡片会留在原文档位置，和鼠标脱节。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听目标元素的
mousemove，取事件对象的e.clientX和e.clientY - 设置卡片
left和top时，减去卡片自身宽高的一半（实现居中跟随），例如：left = e.clientX - cardWidth / 2 - 加
pointer-events: none到卡片上，防止鼠标移入卡片时触发mouseout，打断跟随逻辑
如何避免快速移动鼠标时卡片“抖动”或“瞬移”？
高频 mousemove 事件直接更新 style.left/top 会触发大量重排，尤其在低端设备上易卡顿，表现为跳跃或延迟。这不是 CSS 问题，而是 JS 更新节奏失控。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame节流：只在下一帧绘制前更新一次位置，而非每次事件都改 - 不要在事件回调里直接操作
style，先缓存坐标，再在 rAF 回调中批量写入 - 给卡片加
transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.4, 1)，用transform替代left/top（更利于 GPU 加速） - 若仍抖动，检查是否有多余的
margin或border导致尺寸计算偏差——用getBoundingClientRect()验证实际宽高
移动端触摸场景下，touchmove 怎么适配？
纯 mousemove 在 iOS/Android 上完全不触发。必须监听 touchstart + touchmove，且注意触摸事件默认可滚动，需 e.preventDefault() 阻止，否则卡片会跟随失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
e.touches[0].clientX / clientY取第一个触点坐标（多点触控时只跟主指） - 在
touchstart时绑定touchmove，并立即e.preventDefault()，防止页面滚动干扰 - 别忘了在
touchend或touchcancel时清理监听器，避免内存泄漏 - 桌面端和移动端逻辑尽量复用：用
if ('ontouchstart' in window)分支切换事件类型，而非写两套代码
实际最难处理的是混合设备（比如带触摸屏的 Windows 笔记本）——可能同时触发 mousemove 和 touchmove，造成坐标冲突。这时候得用时间戳或事件标记做互斥，不是加个判断就能完事的。
