必须用 position: relative 包裹图片容器，否则绝对定位元素的百分比 top/left 会相对于 body 或 html 计算，导致缩放漂移；img 本身不能作为定位上下文，需包裹容器设置 relative 才生效。
必须用 position: relative 包裹图片容器，否则所有百分比定位都会相对于视口或错误祖先，一缩放就漂移。
为什么 position: relative 是不可跳过的前提
绝对定位元素（比如热点、图标、标注）的 top/left 百分比值，是相对于「最近的已定位祖先」计算的。如果没显式设 position: relative，浏览器会一路往上找——可能落到 body 或 html 上，导致定位完全脱离图片本身。
常见踩坑点：
- 只给
<img>加position: relative：无效。<img>是替换元素，不能作为定位上下文容器 - 用
display: inline-block替代position: relative：不触发定位上下文，absolute子元素仍会脱标 - 父容器高度为
auto且无明确宽高约束：百分比top/left在部分浏览器中计算失准，尤其配合aspect-ratio时
padding-top 占位与 aspect-ratio 共存时的坐标基准问题
两种方案都依赖父容器宽度算高，但它们对子元素定位的影响不同：
-
padding-top: 56.25%方案下，容器高度 =padding-top值，top: 25%是相对于这个总高度（含 padding）计算的 -
aspect-ratio: 16 / 9方案下，容器高度由比例自动推导，top: 25%是相对于这个推导出的高度，但该高度不含 padding，语义更干净 - 两者混用（比如旧版 fallback 里没清掉
padding-top）会导致容器高度翻倍，top: 25%实际落在错误位置
正确做法：@supports (aspect-ratio: 1) { .container { padding-top: 0; } }，但保留 position: relative ——它不是占位逻辑的一部分，而是定位锚点。
百分比定位在 object-fit: cover 场景下的偏移真相
当图片用 object-fit: cover 时，图像内容被裁剪缩放以填满容器，但容器尺寸和图像可视区域不再一致。此时 top: 30% 是按容器高度算的，不是按图像实际显示内容的高度。
解决路径很窄，只有两个现实选项：
- 改用
background-image+background-size: cover：此时absolute子元素天然锚定在背景图像的可视区域内，top: 30%就真对应图像内容的 30% 高度 - 保留
<img>，但放弃纯 CSS 定位，用 JS 读取img.naturalWidth/img.naturalHeight和img.getBoundingClientRect()，动态换算缩放比，再修正top/left像素值
别试图用 transform: scale() 模拟——它不改变布局盒尺寸，无法修正百分比基准。
定位元素自身尺寸该用 px 还是 %
定位元素（如热点、图标、标注）的 width/height 可以用 px，只要它足够小且视觉上固定；但 top/left 必须用 %，否则响应式缩放后立刻错位。
关键细节：
- 用
transform: translate(-50%, -50%)配合top: 30%; left: 40%，能确保元素中心精准落在目标点，而不是左上角 - 避免给定位元素设
margin：它会干扰translate的基准，且在 flex/grid 容器中行为不稳定 - 如果定位元素需要 hover 效果，务必加
pointer-events: auto（默认是继承的，但某些场景下会被父级覆盖）
最易被忽略的是：当容器有 border 或 padding 时，top: 0 不等于图片顶部边缘，而是容器内边距起点——这时要么清除 border/padding，要么在计算百分比时手动减去对应像素值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
