不能只给加position: relative，因为是替换元素，无法充当定位上下文，浏览器会忽略其对子元素position: absolute的影响；必须额外包裹一层或并设position: relative，否则热区将相对于定位，导致图片滚动或响应式变化时彻底错位。
直接用 position: absolute 叠在 position: relative 容器里，但必须用百分比定位或 JS 动态校准，否则缩放后坐标全漂移。
为什么不能只给 <img> 加 position: relative
因为 <img> 是替换元素，无法充当定位上下文。浏览器会忽略它对子元素 position: absolute 的影响。必须额外包一层 <div> 或 <code><figure></figure>，并设 position: relative；否则所有热区都相对于 定位，图片一滚动或响应式变化就彻底错位。
常见错误：
- 只给
<img>设position: relative→ 热区完全不跟图走 - 忘记清除图片默认的
vertical-align: baseline→ 容器高度塌陷，top值计算失准 - 没设
display: block或overflow: hidden→ 图片下方留白，影响容器实际尺寸
top/left 用 px 还是 %？
用 % 更稳妥，前提是图片容器尺寸稳定、无 padding/border 干扰。百分比基于容器宽高计算，能随图片缩放自动适配位置。
但要注意：
-
top: 25%是距容器顶部 25%，不是图片内容顶部 25% —— 如果用了object-fit: cover，图像实际显示区域和容器尺寸不一致，会导致偏移 - 如果容器有
padding: 10px，那left: 30%实际是从左内边距起算，需手动减去10px或改用calc(30% - 10px) - 纯 CSS 场景下，用
background-image替代<img>可让absolute子元素天然锚定可见图像区域，避免裁剪干扰
热区点击太小、hover 不灵敏怎么办
根本问题不是坐标不准，而是热区本身交互靶心太小。默认 <div> 或 <code><a></a> 是行内元素，不占空间，鼠标悬停区域极窄。
必须做三件事：
- 设
display: block或inline-block，确保元素有明确宽高 - 用
transform: translate(-50%, -50%)把热区中心对准目标点（比如top: 120px; left: 80px;后加该声明），避免靠左上角定位带来的视觉偏差 - 加
pointer-events: auto（显式声明，尤其在父层有pointer-events: none时） - 为可访问性，补
tabindex="0"和aria-label，否则键盘用户无法聚焦
响应式缩放时坐标怎么保持精准
纯 CSS 百分比方案在 object-fit: cover 或动态宽高下会失准，这时必须用 JS 校准。核心逻辑是：读取图片原始尺寸 naturalWidth/naturalHeight 和当前渲染尺寸 getBoundingClientRect()，算出缩放比例，再修正热区 top/left 像素值。
关键点：
- 监听
resize和load（图片加载完成）事件，否则首次渲染可能拿不到真实尺寸 - 避免在每次 resize 中反复重排，可用
requestAnimationFrame节流 - 如果热区数量多（如地图标记超 50 个），优先考虑 Canvas 渲染或视口裁剪，CSS 绝对定位性能会明显下降
最易被忽略的是：热区的 width/height 也得同步缩放 —— 很多人只调 top/left，结果大屏下热区变小到点不中，小屏下又撑满整个区域误触相邻热点。
