根本原因是百分比定位基于父容器而非图片本身；正确做法是用 relative 定位的包裹容器作为上下文，角标用 absolute 定位其中，并推荐使用固定像素值。
用百分比设置 top 和 right 做图片角标时，在响应式布局下容易偏移，根本原因是：百分比是相对于**父容器**的宽高计算的，而角标通常需要相对于**图片本身**定位。当图片缩放（比如通过 max-width: 100% 或 object-fit）时，父容器尺寸可能没变，但图片实际渲染尺寸变了，导致角标“脱钩”。
✅ 正确做法：让角标相对图片定位
核心思路是——把角标放进图片的包裹容器里，并让该容器成为定位上下文（position: relative），再让角标用绝对定位（position: absolute）基于这个容器定位。这样角标就始终“粘”在图片上，随图片缩放一起变化。
- 给图片外层加一个
<div class="img-wrapper">，设position: relative - 图片设
width: 100%; height: auto;或其他响应式写法 - 角标元素（如
<span class="badge">NEW</span>）放在 wrapper 内，设position: absolute; top: 8px; right: 8px;（用固定像素更可控） - 如果必须用百分比，确保父容器尺寸与图片渲染尺寸一致（例如禁用图片缩放、固定 wrapper 尺寸），但不推荐
⚠️ 常见陷阱：父容器不是图片容器
很多人直接把角标加在图片同级、放在大卡片或 flex 容器里，此时 top: 5% 是按卡片高度算的，而图片可能只占卡片一半高——结果角标飘到卡片顶部，而不是图片右上角。
检查方式：打开浏览器开发者工具，悬停角标元素，看它标注的定位参考框是不是你想要的那张图的父盒子。
立即学习“前端免费学习笔记（深入）”；
? 更健壮的替代方案
如果图片是背景图（background-image），可直接在同一个元素上用 ::after 伪元素做角标，并用 background-position + calc() 精准控制位置；或者使用 CSS 容器查询（@container）配合 aspect-ratio 实现更智能的响应逻辑（现代浏览器支持）。
? 快速修复检查清单
- 角标是否在图片的直接父容器内？
- 该父容器是否设置了
position: relative？ - 角标是否用了
position: absolute且未被其他transform或overflow: hidden干扰？ - 是否混用了
vw/vh、百分比、rem 等不同基准单位？建议角标用px或em（继承字体大小）保持视觉一致性
不复杂但容易忽略，关键是定位上下文要对得上。
