必须为图片外层容器设position: relative并加overflow: hidden，否则角标会相对body定位或被裁切；推荐用伪元素+em单位+aspect-ratio实现响应式、可缩放、不溢出的角标。
必须给图片外层容器设 position: relative，否则角标会相对于 body 定位，直接“飞”到页面右上角——这不是 bug，是 CSS 定位机制的必然结果。
父容器为什么非得用 position: relative
absolute 定位元素会逐级向上查找最近的「已定位祖先」。如果只给 <img> 加 position: relative，它不支持 overflow: hidden，且作为替换元素，子元素无法真正以它为定位参考；更糟的是，很多 UI 框架默认给卡片加了 overflow: hidden，但没配 position: relative，结果角标被裁掉一半还找不到原因。
正确做法是单独包一层 <div class="image-wrapper">，然后：
- 显式设置
position: relative - 同时加
overflow: hidden（防止角标越界干扰相邻元素） - 避免对
<img>或<button>直接设定位属性
top 和 right 值写死就错一半
固定写 top: 0; right: 0 看似贴角，但实际会让角标左上角顶在容器右上角点，文字或三角形常被切掉顶部。尤其当角标用伪元素画三角、或带阴影/描边时，视觉锚点和布局锚点不一致。
立即学习“前端免费学习笔记（深入）”；
推荐组合：
- 右上内侧：用
top: 4px; right: 4px（留白比靠边更稳） - 需要旋转斜角标：先
top: 0; right: 0，再加transform: rotate(-45deg) translate(50%, -50%)，并设transform-origin: top right - 响应式场景下，改用
top: 0.5em; right: 0.5em，随父元素字体缩放
伪元素画角标比 DOM 元素更轻量也更可控
很多人用额外 <span class="badge">热卖</span>，但这样要管 HTML 结构、JS 动态插入逻辑、z-index 层级，一不留神就被卡片阴影盖住。用 ::before 或 ::after 可以把样式和结构完全解耦。
例如三角形角标：
.image-wrapper::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #ff4757;
border-right-color: #ff4757;
}
好处包括：
- 无需额外 HTML 节点，减少 DOM 深度
- 颜色、尺寸、旋转全由 CSS 控制，适配 dark mode 更容易
- 高清屏下无锯齿（border 技巧渲染比小图清晰）
- 配合
clip-path或transform微调位置时，不会触发重排
overflow: hidden 在缩放时可能切掉角标
当图片设 width: 100%; height: auto，或容器用 aspect-ratio 自适应时，overflow: hidden 会严格按当前宽高裁剪——角标哪怕只多出 1px，也会被砍掉。这不是定位偏了，是裁剪边界变了。
规避方式很实际：
- 给
.image-wrapper设固定aspect-ratio（如aspect-ratio: 4/3），防拉伸变形 - 角标尺寸用
em或rem，别用px（比如font-size: 0.75em配合line-height: 1） - 测试横竖屏切换时，手动拖动浏览器宽度，观察角标是否始终完整可见
- 真遇到裁切，宁可加一点
padding预留空间，也别关overflow: hidden——否则角标溢出会破坏整体布局
最常被忽略的一点：角标是否在所有设备上都「刚好完整」，取决于它和父容器的尺寸关系，而不是定位代码写得多漂亮。测的时候别只看桌面端，一定要在真机上滑动、旋转、缩放，看它会不会突然消失半截。
