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