放大镜悬浮框必须用position: absolute且其父容器设position: relative，否则镜片会相对于html根节点定位而飘至左上角；坐标计算须用getBoundingClientRect()并扣减border，移动端需适配touch事件并阻止默认滚动。

放大镜悬浮框必须用 position: absolute，且其父容器必须设 position: relative —— 否则镜片会相对于整个页面定位，一动就飞出小图区域。

为什么镜片总“飘”到页面左上角？

这是最常见错误：只给镜片元素加了 position: absolute，但没给它的直接父容器（即小图所在的盒子）加 position: relative。浏览器找不到定位上下文，就退回到 根节点，导致 left/top 值全部失效。

正确做法：

• 小图容器（比如
  ）必须显式声明 position: relative
• 镜片元素（
  ）用 position: absolute，并确保它在 DOM 中是该容器的子元素
• 避免用 transform: translate() 替代 left/top，否则会干扰 getBoundingClientRect() 的坐标计算

镜片位置怎么算才不抖、不偏移？

抖动和偏移的核心原因是坐标来源混乱。别用 event.offsetX/event.offsetY——它们受 padding/border 影响大，且在某些浏览器中行为不一致。

必须用 getBoundingClientRect() 算相对坐标：


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载
• 先获取小图容器的 rect = container.getBoundingClientRect()
• 再算鼠标相对于容器左上角的 X/Y：const x = e.clientX - rect.left - container.clientLeft（clientLeft 扣除左边框宽度）
• 镜片中心对齐时，left = x - lens.offsetWidth / 2，top = y - lens.offsetHeight / 2
• 最后加边界限制：left = Math.max(0, Math.min(left, container.clientWidth - lens.offsetWidth))

移动端 touch 事件怎么适配定位？

手机上没有 mousemove，:hover 也只触发一次，直接复用 PC 逻辑会导致镜片不动或闪退。

关键改动点：

• 监听 touchstart 和 touchmove，从 e.touches[0] 取坐标
• 镜片初始显示要靠 touchstart 触发，不能等 touchmove 才 show
• 用 requestAnimationFrame 节流 touchmove，否则 iOS 上会卡顿
• 别忘了 touchmove 默认有滚动行为，加 e.preventDefault() 阻止页面跟着拖拽

真正难的不是写几行 left top，而是所有坐标都得锚定在同一个盒模型上——容器有没有 border、padding、box-sizing，是否用了 transform 缩放图片，都会让 background-position 和镜片位置错开一两个像素。这些细节不抠准，放大镜就永远“差一口气”。