放大镜总飘到左上角是因为position: absolute镜片找不到已定位祖先，退至或定位；解法是给图片容器（非
放大镜总飘到左上角？先检查容器的定位上下文
根本原因是 position: absolute 的镜片元素找不到已定位祖先，被迫回退到 或 定位。这不是 JS 计算错，而是 CSS 布局链断了。
必须给「图片容器」（不是 <img> 标签本身）加 position: relative。因为 <img> 是替换元素，设 relative 无效；而容器是普通块级元素，才能成为有效的定位上下文。
- 常见错误：只给
<img>加position: relative - Flex/Grid 画廊中，每个子项（如
.gallery-item）都得单独设position: relative - 容器若设了
overflow: hidden，但没预留足够内边距或尺寸，镜片会被裁掉——此时要检查容器宽高是否包含镜片移动所需余量
镜片位置计算该用 clientX/clientY 还是 offsetX/offsetY？
必须用 clientX/clientY 配合 getBoundingClientRect()，不能依赖 offsetX/offsetY。后者在以下场景会严重失准：
- 图片容器有
padding或border，offsetX/Y会把它们算进坐标 - 容器被
transform: scale()缩放过，offsetX/Y返回的是缩放前的逻辑坐标 - 父级存在滚动或
transform，导致事件坐标系与 DOM 布局坐标系不一致
正确做法：
- 监听事件的目标必须是容器（如
.image-container），不是<img> - 每次
mousemove中调用container.getBoundingClientRect() - 计算：
mouseX - rect.left - lensWidth / 2（实现镜片中心对齐）
background-position 映射偏移值怎么算才不偏？
核心是缩放比 = 大图自然尺寸 / 小图容器尺寸。假设小图容器是 300×300px，大图背景是 900×900px，则缩放比为 3。
镜片中心点相对于容器左上角的坐标是 centerX、centerY，对应的大图背景偏移值为：
const offsetX = -(centerX * scale - bigContainerWidth / 2); const offsetY = -(centerY * scale - bigContainerHeight / 2);
负号是因为 background-position 向右/下移动时，值为负（背景图实际向左/上走）。
- 务必确认大图尺寸是原始分辨率，不是 CSS 拉伸后的尺寸；
background-size: 100% 100%会导致映射完全失真 - 如果用了
object-fit: cover，JS 无法读取原始图尺寸，需手动维护缩放比或改用<img>+object-position - 容器若有
border或padding，必须从getBoundingClientRect()结果中显式减去，不能靠 CSS 盒模型自动处理
移动端 touchmove 下镜片滞后或跳变？别反复读布局
问题根源是 touches[0].clientX/Y 是实时坐标，而 getBoundingClientRect() 返回的是当前渲染帧的静态快照。页面滚动或重排时，二者不同步，造成“拖尾”或“瞬移”。
解法是统一时间基准：
- 在
touchstart时缓存一次container.getBoundingClientRect()结果 - 后续所有
touchmove都复用该缓存值，避免触发强制同步回流 - 如需更高精度，用
requestAnimationFrame对齐渲染帧再更新位置，而非直接在touchmove里操作样式 - 给镜片容器加
touch-action: none，防止 Android Chrome 默认滚动行为干扰
真正难的不是 left/top 数值本身，而是让这个数值始终对应用户「看到的那块像素」——这要求你清楚知道图片如何被 CSS 渲染、浏览器如何计算视觉坐标、以及 JS 获取的坐标属于哪一套系统。任何一环混淆，放大镜就只是个晃动的遮罩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
