首先将父容器设为relative定位，再通过absolute配合top和right将角标定位在图片右上角，利用transform微调对齐并用z-index确保层级，即可精准实现角标效果。
在网页设计中，图片角标常用于标记促销、新功能或状态信息。使用CSS的position: absolute配合top和right属性，可以轻松将角标精准定位在图片的右上角。
1. 设置父容器为相对定位
要让绝对定位的角标相对于图片定位，必须将图片的容器设置为position: relative。这样absolute才会以该容器为参考点。
示例结构：
<div class="image-container"> <img src="example.jpg" alt="示例图片"> <span class="badge">NEW</span> </div>
2. 使用 absolute 定位角标
给角标元素设置position: absolute，并通过top和right控制其位置。
立即学习“前端免费学习笔记（深入）”；
常用设置：
- top: 0：贴住顶部边缘
- right: 0：贴住右侧边缘
-
transform 可微调位置，比如
translate(50%, -50%)让角标从中心点对齐
CSS 示例：
.image-container {
position: relative;
display: inline-block;
}
.badge {
position: absolute;
top: 0;
right: 0;
background-color: red;
color: white;
padding: 4px 8px;
font-size: 12px;
border-radius: 4px 0 0;
}
3. 常见优化技巧
为了让角标更美观，可加入以下调整：
- 添加
z-index确保角标显示在图片上方 - 使用
transform: translate(50%, -50%)将角标精确放在右上角顶点 - 设置最小宽度或固定尺寸保持样式统一
进阶定位示例：
.badge {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
background: #ff4d4f;
color: #fff;
padding: 2px 6px;
font-size: 10px;
line-height: 1;
border-radius: 4px;
z-index: 1;
}
基本上就这些。掌握 relative 与 absolute 的配合，再用 top 和 right 锁定角落，就能高效实现图片角标效果，不复杂但容易忽略细节。
