必须用 position: relative 包裹图片容器以建立定位上下文，使内部 absolute 热点能相对于图片而非视口定位；仅设 img 为 relative 无效，需额外 div 包裹并清除图片默认对齐导致的塌陷。
为什么用 position: relative 包裹图片是必须的
因为 position: absolute 的子元素默认相对于最近的「已定位祖先」（即 position 值为 relative、absolute、fixed 或 sticky 的父级）进行定位。如果直接把热点 <div> 放在 <body> 下，它会以视口为参考，图片一滚动或响应式缩放，热点就完全错位。
所以必须给图片容器加 position: relative —— 它本身不改变布局（不像 absolute 会脱离文档流），只建立一个定位上下文，让内部的绝对定位元素能“认准这张图”。
常见错误：
- 只给图片本身设
position: relative：无效，<img>是替换元素，不能当定位容器；必须包裹一层<div>或<figure> - 忘记设
display: block或清除图片默认的vertical-align: baseline，导致容器高度塌陷，absolute热点垂直定位失准
absolute 热点的坐标怎么算才不漂移
用 top/left（或 bottom/right）时，数值应基于图片原始尺寸（比如 800×600）来设计，再配合 transform: scale() 或 width: 100% 实现响应式缩放——但注意：缩放后像素坐标不会自动等比缩放，必须用相对单位或 JS 补偿。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是统一用百分比定位：
.hotspot {
position: absolute;
top: 25%; /* 距顶部 25% */
left: 30%; /* 距左侧 30% */
width: 12%;
height: 8%;
}这样无论图片宽高如何变化（包括 object-fit: cover 场景），热点始终锚定在图像内容的相对位置。但要注意：top/left 百分比是相对于容器宽度/高度，不是图片内容区域——如果容器有 padding 或 border，需额外减去。
如何让热点真正「贴合图片内容」而不是容器框
当图片使用 object-fit: cover 或 contain，实际显示区域和容器尺寸可能不一致，此时仅靠容器百分比会偏移。解决路径有两个：
- 用
background-image替代<img>，把图片作为容器背景，这样absolute子元素天然相对于可见图像区域定位（需配合background-size和background-position控制裁剪） - 保留
<img>，但用 JS 读取getBoundingClientRect()+naturalWidth/naturalHeight，动态计算缩放比例，再修正热点top/left像素值（适合热点少、交互强的场景，如地图标记）
纯 CSS 方案中，background-image 更可控；需要 SEO 或懒加载时，<img> + JS 校准更现实。
点击区域太小、hover 不灵敏怎么办
默认 <div class="hotspot"> 没内容也没尺寸，浏览器渲染出的可点击区域可能只有几像素。必须显式设置 width 和 height，哪怕只是 1px —— 否则 :hover 和 click 都不可靠。
增强交互体验的实用技巧：
- 加
cursor: pointer让用户感知可点 - 用
pointer-events: auto（默认）确保事件穿透；若热点内还有子元素，注意pointer-events: none可能误关事件 - 移动端要加
touch-action: manipulation减少点击延迟 - 视觉反馈别只靠
:hover，对:active加transform: scale(0.95)或背景色变化，避免用户怀疑没点上
最易被忽略的是：多个 absolute 热点重叠时，z-index 顺序必须显式声明，否则按 HTML 流顺序堆叠，后期维护极易错乱。
