放大镜悬浮框必须用position: absolute且其父容器设position: relative，否则镜片会相对于html根节点定位而飘至左上角；坐标计算须用getBoundingClientRect()并扣减border，移动端需适配touch事件并阻止默认滚动。
放大镜悬浮框必须用 position: absolute，且其父容器必须设 position: relative —— 否则镜片会相对于整个页面定位，一动就飞出小图区域。
为什么镜片总“飘”到页面左上角？
这是最常见错误：只给镜片元素加了 position: absolute，但没给它的直接父容器（即小图所在的盒子）加 position: relative。浏览器找不到定位上下文，就退回到 <html> 根节点，导致 left/top 值全部失效。
正确做法：
- 小图容器（比如
<div class="preview-wrap">）必须显式声明position: relative - 镜片元素（
<div class="lens">）用position: absolute，并确保它在 DOM 中是该容器的子元素 - 避免用
transform: translate()替代left/top，否则会干扰getBoundingClientRect()的坐标计算
镜片位置怎么算才不抖、不偏移？
抖动和偏移的核心原因是坐标来源混乱。别用 event.offsetX/event.offsetY——它们受 padding/border 影响大，且在某些浏览器中行为不一致。
立即学习“前端免费学习笔记（深入）”；
必须用 getBoundingClientRect() 算相对坐标：
- 先获取小图容器的
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 和镜片位置错开一两个像素。这些细节不抠准，放大镜就永远“差一口气”。
