图片容器必须设为position: relative，否则absolute标注会相对错误祖先定位；标注应基于原图宽高用百分比计算，并用transform微调中心点，同时兼顾可访问性与移动端点击热区。
图片容器必须设为 position: relative
不设这个，所有 position: absolute 的标注都会相对于最近的定位祖先（可能是 body），导致点击或悬停时坐标完全错位。尤其在响应式布局里，一旦父容器是 flex 或 grid 且没加 position: relative，标注就“飞走”了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给包裹
<img alt="CSS如何将图片标注在相对坐标上_制作响应式图片标注系统，通过relative图片与absolute百分比标注" >的最外层容器（比如<div class="image-wrapper">）加上 <code>position: relative - 不要直接给
<img alt="CSS如何将图片标注在相对坐标上_制作响应式图片标注系统，通过relative图片与absolute百分比标注" >设position: relative——它本身是替换元素，设了也没用，还可能干扰垂直对齐 - 如果用了
object-fit: cover，注意标注坐标仍需按原始图片宽高比例计算，不是容器尺寸 - 标注元素统一设
position: absolute，top和left用百分比表示相对于图片左上角的位置 - 用
transform: translate(-50%, -50%)把标注自身中心对准该坐标点（前提是标注有明确宽高或min-width/min-height） - 避免用
right/bottom配合百分比——它们基于容器右/下边缘计算，在缩放时更难预测 - 别用 JavaScript 在 resize 时重新计算像素值再塞进
style.left——这既慢又容易和 CSS 冲突 - 标注坐标必须基于原始图片分辨率（比如 1920×1080）计算：热点 X=864px →
left: 45%（864 / 1920） - 如果图片被
aspect-ratio或 padding-bottom 技巧维持比例，只要容器宽高比与原图一致，百分比依然准确 - 用
aria-label描述标注内容，比如aria-label="发动机舱盖，点击查看详情" - 移动端点击热区至少保证
min-width: 44px; min-height: 44px，否则 iOS Safari 会忽略点击 - 避免用
:hover单独控制显示隐藏——改用.annotation:focus-within或 JS 切换aria-expanded
标注元素用 top/left 百分比 + transform 微调
只用 top: 20%; left: 30% 看似简单，但标注框自身有宽高，会导致“锚点”在左上角，而不是你想要的中心点或热点位置。直接写百分比会偏移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
响应式下保持标注坐标不失真
图片用 width: 100% 或 max-width: 100% 缩放时，像素坐标会变，但百分比坐标不会自动重算——只要原始标注值是按原图宽高算出的百分比，就能一直生效。
关键陷阱：
交互热区要兼顾可访问性与移动端点击
<div> 标注默认不可聚焦、无键盘支持，纯靠 hover 的提示在手机上根本触发不了。
<p>实操建议：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>每个标注元素加上 <code>tabindex="0"，并监听 click 和 keydown（空格/回车）
