使用父容器relative定位和overflow: hidden可防止角标溢出。具体实现为：1. html需分层，用div包裹img和角标；2. 该div设position: relative和overflow: hidden；3. 角标用absolute定位并以该div为参考；4. 避免对img直接设relative或overflow；5. 推荐用伪元素绘制三角形角标以保证清晰度。
为什么直接用 position: absolute 可能让角标“飞出去”
常见错误是给图片容器设了 position: relative，但忘了限制溢出——角标（比如一个带“热卖”文字的三角形）超出图片边界后依然可见，尤其在响应式布局里容易错位或遮挡相邻元素。根本原因是父容器默认 overflow: visible，absolute 子元素不受裁剪。
解决的关键不是调 z-index 或改 top/right 值，而是让父容器成为定位上下文的同时主动“收住”越界内容：
- 图片外层必须包裹一个相对定位的容器（不能直接对
<img>设position: relative，它不支持overflow: hidden裁剪子元素） - 该容器需显式设置
overflow: hidden - 角标用
position: absolute，坐标以该容器为参考系，例如top: 0; right: 0
HTML结构怎么搭才不出错
错误写法：<img src="..." style="max-width:90%"> —— <img> 是替换元素，overflow 对它无效，角标照样溢出。
正确结构必须分层：
<div class="product-card">
<div class="image-wrapper">
@@##@@
<span class="hot-badge">热卖</span>
</div>
</div>
对应 CSS 中，.image-wrapper 才是那个要设 position: relative 和 overflow: hidden 的关键节点。
overflow: hidden 在不同尺寸下的表现风险
当图片被缩放（如 width: 100%; height: auto）或容器宽高比变化时，overflow: hidden 会严格按容器当前尺寸裁剪，可能导致角标被意外切掉一半。尤其在移动端横竖屏切换时容易复现。
规避方法：
- 角标尺寸用
em或rem，避免固定px值导致缩放失衡 - 给
.image-wrapper设置明确的aspect-ratio（如aspect-ratio: 4/3），防止拉伸变形 - 测试时手动调整浏览器宽度，观察角标是否始终完整显示在右上角内侧
用伪元素画三角形角标比用图片更稳
很多人用小图做角标，但高清屏下易模糊，且加载失败就留白。用 ::before + border 画三角形更轻量、可缩放、颜色可控。
示例（右上角红色三角形+文字）：
.hot-badge {
position: absolute;
top: 0;
right: 0;
background: #ff4757;
color: white;
font-size: 12px;
padding: 2px 8px;
line-height: 1;
}
.hot-badge::before {
content: "";
position: absolute;
top: 0;
right: 100%;
border-width: 0 8px 8px 0;
border-style: solid;
border-color: transparent #ff4757 transparent transparent;
}
注意：right: 100% 让三角形紧贴文字左侧，border-color 顺序必须和 border-width 匹配，否则三角方向错乱。
真正难的是在不同设备像素比下保持三角形锐利——别用 transform: scale()，它会模糊；优先靠 border 原生渲染，必要时加 image-rendering: -webkit-optimize-contrast 防抗锯齿软化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
