放大镜总飘到页面左上角是因为position: absolute元素找不到已定位祖先，退至<body>或<html>定位；解法是给图片容器设position: relative。
为什么放大镜总飘到页面左上角？
因为 position: absolute 的放大镜元素找不到「已定位祖先」，只能退到 <body> 或 <html> 上定位。最直接的解法是给图片容器（不是 <img> 本身）加 position: relative ——<img> 是替换元素，设了 relative 也无效。
常见错误包括：
- 只给
<img>加position: relative - 用
display: grid或flex布局画廊时，忘了每个子项都要独立成定位上下文 - 容器有
overflow: hidden却没预留足够空间，把放大镜裁掉了
用 clientX/clientY 还是 offsetX/offsetY？
必须用 clientX/clientY 配合 getBoundingClientRect()，不能依赖 offsetX/offsetY。
offsetX/Y 在以下情况会严重失准：
立即学习“前端免费学习笔记（深入）”；
- 图片容器带
padding或border - 容器被
transform: scale()缩放过 - 父级有滚动或
transform导致坐标系偏移
正确做法是：
- 监听
mousemove事件的目标必须是图片容器（如.gallery-item），不是<img> - 调用
container.getBoundingClientRect()拿当前帧视口坐标 - 计算：
mouseX - rect.left - lensWidth / 2（居中对齐）
移动端 touchmove 下放大镜滞后怎么办？
因为 touches[0].clientX/Y 是实时坐标，而 getBoundingClientRect() 返回的是当前渲染帧的静态位置，页面滚动时二者不同步，导致放大镜“跳”或“拖尾”。
解决思路是统一时间基准：
- 在
touchstart时缓存一次getBoundingClientRect()结果 - 后续
touchmove中复用该缓存值，避免反复读取布局 - 若需更高精度，可用
requestAnimationFrame对齐渲染帧，再更新位置
注意：不要在 touchmove 里直接调用 getBoundingClientRect()，它触发回流，性能差且加剧不同步。
background-image 和 object-fit 对坐标映射的影响
如果用 background-image 实现原图，background-size: cover 会导致 JS 无法从 DOM 读取原始尺寸，放大区域必然偏移或拉伸失真。
更可控的做法是：
- 优先用
<img src="">+object-fit: cover+object-position - 若必须用背景图，得在 JS 中手动维护缩放比：
bgSizeX = bgWidth / containerWidth，再用它校正鼠标坐标 -
background-size: 100% 100%虽省事，但强制拉伸，电商场景慎用
真正难的不是算出 left/top，而是让这个坐标始终对应用户「看到的那块像素」——这要求你清楚知道图片如何被 CSS 渲染、浏览器如何计算视觉坐标、以及 JS 获取的坐标属于哪一套系统。
