用 position: absolute 配合 top/left 百分比值，再将容器设为 position: relative，可使热点区域随图片缩放自适应；px 坐标在响应式场景下必然错位，因百分比基于父容器宽高计算，而图片可能被 max-width、object-fit 或 flex 缩放。
图片内点击区域不准？别用px，改用百分比+absolute
直接说结论：用 position: absolute 配合 top/left 百分比值，再把容器设为 position: relative，就能让热点区域随图片缩放自适应。硬写 px 坐标在响应式页面里必然错位。
为什么top: 20px会失效，而top: 20%能跟住图片
因为百分比是相对于父容器（即图片外层 relative 容器）的宽高计算的，而图片本身可能被 max-width: 100%、object-fit 或 flex 缩放——此时 px 值完全脱离图片实际渲染尺寸。常见错误现象：
- 桌面显示正常，手机上点击区域偏右下角
- 浏览器缩放后热点“漂移”
- 图片加了
border-radius或transform: scale(0.9)，但热点没跟着变形
解决方式就是切断对绝对像素的依赖：
<div class="img-container"> <img src="map.jpg" alt="interactive map"> <a href="#room1" class="hotspot" style="top: 35%; left: 22%;"></a> </div>
.img-container { position: relative; display: inline-block; } —— 关键是这个 inline-block，它让容器宽度紧贴图片原始宽高（或当前渲染宽高），百分比才有意义。
立即学习“前端免费学习笔记（深入）”；
transform: translate(-50%, -50%) 是必须加的吗
不是必须，但几乎总要加。因为 top: 35% 是从元素**上边缘**开始算，而你通常想让点击点中心对准图片上某个坐标（比如地图上的房间中心）。不加的话，a 标签左上角会落在目标位置，点击体验极差。
所以标准写法是：
.hotspot {
position: absolute;
top: 35%;
left: 22%;
width: 24px;
height: 24px;
transform: translate(-50%, -50%);
}
注意：width/height 仍可用 px（小图标尺寸固定），但定位必须用百分比 + translate 校准中心。
遇到object-fit: cover时坐标怎么算
这是最容易翻车的场景。如果图片用了 object-fit: cover，它会裁剪并缩放填充容器，此时图片内容区域和容器边界不再一一对应——你按容器百分比定位，可能点到空白处。
解决思路只有两个：
- 放弃
object-fit，改用width: 100%; height: auto+ 容器overflow: hidden模拟裁剪效果，保证图片宽高比与容器一致 - 用 JS 动态计算真实渲染后的图片内容偏移量，再修正
top/left（复杂，仅当必须用 cover 且图片比例不可控时才考虑）
多数情况下，第一种更稳。记住：只要图片内容区域和容器框能对齐，百分比就可靠；一旦有不可见裁剪，百分比就失去参照系。
真正难的不是写几行 CSS，而是确认图片在不同设备上是否真的以相同比例铺满容器——这点常被忽略，一上线就出问题。
