图片容器必须用 position: relative
不加这句，所有 position: absolute 的标注都会相对于 body 或最近的定位祖先偏移，根本对不准图片。常见错误是只给标注元素设 absolute，却忘了父容器——尤其是用 <img alt="CSS如何实现响应式图片标注系统_通过relative图片与absolute百分比标注" > 直接包裹时，<img alt="CSS如何实现响应式图片标注系统_通过relative图片与absolute百分比标注" > 默认不是定位上下文。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
<img alt="CSS如何实现响应式图片标注系统_通过relative图片与absolute百分比标注" >包进一个<div class="image-container">，并在 CSS 中写 <code>.image-container { position: relative; } - 避免用
display: inline或未设宽高的父容器，否则relative容器高度塌陷，标注会错位 - 如果图片用
object-fit: cover，标注位置需按原始宽高比计算，不是渲染后尺寸 - 标注点坐标按原始图片分辨率计算：比如在 800×600 图上标在 (200, 150)，对应百分比就是
left: 25%; top: 25% - 别用
right/bottom，它们依赖容器宽度，而响应式下容器宽可能变化，但图片宽高比未必同步变 - 若需居中标注，用
transform: translate(-50%, -50%)配合left: 50%; top: 50%，避免因元素自身宽高不确定导致偏移 - 当图片用
object-fit: cover且容器宽高比固定（如卡片 16:9）时，实际显示区域被裁切，此时标注坐标得按裁切后可视区域重新映射 - 移动端横屏/竖屏切换时，若容器从
width: 100%变成height: 100vh，就得用媒体查询单独调top/left - 用
aspect-ratio控制容器比例比靠 JS 算更轻量，但注意 Safari 15.4+ 才完全支持 - 字体用
font-size: clamp(0.75rem, 2.5vw, 1.25rem)，让字号在最小/最大之间随容器宽度平滑变化 - 避免用
em，它继承父元素字体大小，而父容器（.image-container）通常没设font-size，容易失控 - 图标类标注（如小圆点）用
width/height配合vmin更稳，例如width: 1.5vmin; height: 1.5vmin;
标注坐标必须用百分比 + top/left
用像素值（如 top: 24px）会导致缩放后标注漂移；用视口单位（如 vh）又和图片自身比例脱钩。只有 top/left 配合 % 才能随图片等比缩放。
实操建议：
立即学习“前端免费学习笔记（深入）”；
响应式断点里要重算标注位置？不一定
只要标注用的是百分比，且图片始终按比例缩放（比如 max-width: 100%; height: auto），那大多数断点下无需改坐标。真正要干预的，是那些破坏宽高比的场景。
实操建议：
立即学习“前端免费学习笔记（深入）”；
标注文字缩放不协调？用 rem 或 clamp()
纯百分比定位能保位置，但字体大小默认不随图缩放。用户缩放页面或换设备时，小图上的标注字可能糊成一团，大图上又细得看不清。
实操建议：
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是图片加载完成前的标注错位——img 没设 width/height 属性时，浏览器不知道原始尺寸，容器高度为 0，absolute 标注会堆在顶部。务必在 HTML 里写死 width 和 height 属性，哪怕只是占位用。
