用 position: absolute + top/left 百分比是唯一靠谱方案，因长图缩放导致 px 坐标漂移，百分比基于父容器尺寸计算，配合 relative 定位、固定热区尺寸及 transform: translate(-50%, -50%) 可精准锚定中心。
为什么用 position: absolute + top/left 百分比是唯一靠谱方案？
因为长图在不同设备上缩放比例不一致，硬写 px 坐标必然漂移。浏览器对长图的渲染受 max-width、object-fit、flex 容器约束影响极大，此时图片实际宽高 ≠ 原始尺寸，top: 120px 就完全失去参照系。
百分比值（如 top: 32%）是相对于父容器计算的，只要父容器尺寸能真实反映图片当前渲染尺寸，热点就能“粘住”目标位置。关键前提是：父容器必须设为 position: relative，且自身尺寸不能脱离图片——推荐用 display: inline-block 或显式设置 width/height。
- 不要把图片直接塞进
div后不设任何样式，否则该div默认是block且宽度 100%，但高度塌陷，百分比定位失效 - 如果长图被
object-fit: cover裁剪，百分比仍有效，但坐标需基于裁剪后可视区域重新估算（不是原始图尺寸） -
transform: scale()会放大整个容器，包括绝对定位子元素，导致热点变大偏移；应避免在容器上用scale，改用width/height控制缩放
如何让点击点中心精准对准地图坐标？
默认 top: 35% 是从热区元素**上边缘**起算，而你真正想点的是某个房间中心或图标中心——不加偏移，用户得戳热区左上角才能触发，体验极差。
必须加 transform: translate(-50%, -50%)，它把热区自身的中心点“锚定”到指定坐标。这个操作不是可选，是交互可用性的底线。
- 热区元素本身要设固定尺寸，比如
width: 32px; height: 32px;，否则translate(-50%, -50%)没意义 - 别用
min-width或max-width，它们会让热区在不同屏幕下忽大忽小，破坏点击精度 - 如果热区需要显示文字或图标，确保
font-size也用固定值（如14px），避免缩放干扰中心定位
响应式长图下热点错位？别靠媒体查询硬调，用 JS 动态重算更稳
媒体查询按视口宽度切，但长图的实际缩放由父容器、max-width、object-fit 共同决定，CSS 拿不到这些运行时参数。纯 CSS 无法知道“此刻图片渲染出来宽多少、高多少”，所以硬写 @media (max-width: 768px) { .hotspot { left: 22%; } } 必然不准。
正确做法是监听 resize 和 load 事件，用 getBoundingClientRect() 获取图片当前渲染尺寸，再把原始坐标等比换算成新百分比。
- 原始坐标如果是 px（比如设计稿里标了
x: 420px, y: 890px），先除以设计稿图片原始宽高，得到比例值，再乘以当前渲染宽高 - 别在每次 resize 里直接改
style.left，改用 CSS 自定义属性（--hotspot-x）+ calc()，减少重排 - 首次加载时图片可能还没解码完成，
img.naturalWidth可能为 0，务必等img.complete && img.naturalWidth > 0再计算
用 <map></map> + <area> 还是纯 CSS 层叠？
<map></map> 本身不可见、不可样式化、不支持 hover 动画、无法添加阴影或渐变，仅提供逻辑点击区域。如果你只需要跳转链接，它够用；但凡要视觉反馈、状态高亮、tooltip 提示、拖拽交互，就必须用 CSS 层叠方案（position: absolute + a 或 div）。
-
<area>的coords必须是 px 值，无法响应式，长图缩放后必定失效 - 想兼容键盘导航和屏幕阅读器？
<area>支持alt，但 CSS 热区必须手动加tabindex="0"和aria-label - 多个热区叠加时，
<area>的 z-index 无效，而 CSS 层叠可精确控制堆叠顺序
复杂长图标记的难点不在定位本身，而在“怎么让坐标始终贴合图片的真实渲染形态”。这要求你放弃静态思维，把热区当成一个随图片呼吸的活体组件——它的位置、尺寸、甚至是否可见，都得跟着图片的 layout lifecycle 实时同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
