直接给<img>加position: relative失效，因其是替换元素不支持overflow: hidden，无法裁剪绝对定位的角标；须用块级容器包裹并设position: relative和overflow: hidden。
为什么直接给 <img> 加 position: relative 会失效
因为 <img> 是替换元素，不支持 overflow: hidden，即使设了 position: relative，它也无法裁剪子元素。角标一旦用 position: absolute 定位，就会脱离图片边界，飘到页面任意位置——尤其在响应式缩放后更明显。
必须用一个块级容器包裹 <img> 和角标，并对这个容器设 position: relative 和 overflow: hidden，才能让角标真正“钉”在图片上、且不越界。
- 错误写法：
<img src="x.jpg" style="position: relative; overflow: hidden"><span class="badge">热卖</span>—— 角标不受控 - 正确结构：外层
<div class="image-wrapper">包住<img>和<span class="badge"> - 该容器需有明确尺寸来源（靠图片撑开 or 显式设宽高），否则
top/right偏移可能计算失准
position: absolute 角标定位时，top/right 与 transform 怎么配合才可靠
只用 top: 0; right: 0 能把角标左上角顶到容器右上角，但实际需要的是“角标自身右上角对齐容器右上角”，所以得用 transform 微调。
- 推荐组合：
top: 0; right: 0; transform: translate(50%, -50%)—— 让角标中心点对齐右上角，再向右上各偏移自身一半尺寸 - 如果角标内容固定（如“新”字），也可用
right: 4px; top: 4px+margin: 0控制内边距，避免紧贴边缘 - 响应式场景下慎用固定
px值；可用em或rem配合字体大小缩放，或用clamp()动态控制尺寸
如何防止角标在图片缩放后错位
图片设了 max-width: 100% 或 width: 100% 后，容器尺寸会变，但角标若用固定像素定位（比如 top: 12px; right: 12px），就会相对原始尺寸偏移，导致位置漂移。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥方式：容器和角标都用相对单位，例如
right: 1em; top: 1em，并确保父容器font-size与图片缩放同步 - 进阶方案：用 CSS 自定义属性 + JS 监听图片加载/尺寸变化，动态更新
--badge-offset变量值 - 简单兜底：给角标加
pointer-events: none，避免误触；同时设z-index: 2确保压在图片上层
伪元素 vs 独立标签：哪个更适合做角标
用 ::before 或 ::after 绘制三角形角标，比额外加一个 <span> 更轻量、更可控，尤其适合纯图形类标识（如“热”字带小三角）。
- 优势：无需额外 DOM 节点；可直接用
border画三角，清晰度高；样式继承更干净 - 限制：内容不可选、不可复制；无法绑定事件（除非用
pointer-events: auto覆盖） - 推荐写法：
.badge::before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 12px solid red; border-left: 12px solid transparent; }
top 值，而是先理清“谁是包含块”“谁负责裁剪”“谁决定尺寸”。 
