答案：使用父容器relative定位和子元素absolute定位可将角标固定在图片角落。具体实现为：1. HTML结构包含图片和角标；2. 父容器设position: relative，角标设position: absolute并用top/right等控制位置；3. 调整bottom、left等值可改变角标方位；4. 注意z-index、尺寸单位与响应式适配。
要在CSS中实现图片角标（比如“新”、“热”、“推荐”等标签）固定在图片右上角或右下角，使用 position: absolute 结合 top 与 right 是最常见且有效的布局方案。关键是父容器要设置为相对定位（relative），让绝对定位的角标相对于它进行定位。
1. 基本结构：HTML 搭建
通常是一个外层容器包裹图片和角标元素：
<div class="image-wrapper"> <img src="example.jpg" alt="示例图片"> <span class="badge">新</span> </div>
2. CSS 核心：定位控制
通过以下样式将角标固定在图片右上角：
.image-wrapper {
position: relative;
display: inline-block; /* 避免容器塌陷，按图片大小自适应 */
}
<p>.badge {
position: absolute;
top: 0;
right: 0;
background-color: red;
color: white;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
z-index: 10;
}</p>说明：
立即学习“前端免费学习笔记（深入）”；
- position: relative 在 .image-wrapper 上建立定位上下文，使内部的 absolute 元素以此为基准。
- top: 0; right: 0; 将角标对齐到父容器的右上角。
- z-index 确保角标显示在图片上方，避免被遮挡。
- display: inline-block 让容器宽度贴合图片，适合响应式布局。
3. 常见变体：不同位置调整
如果想把角标放在右下角，只需修改 top 为 bottom：
.badge {
position: absolute;
bottom: 0;
right: 0;
background-color: orange;
padding: 6px 8px;
}
左上角则使用 top 和 left：
.badge {
top: 0;
left: 0;
}
4. 注意事项与优化建议
实际使用中需注意以下几点：
- 确保父容器有明确的定位（relative），否则 absolute 会向上寻找祖先，可能导致错位。
- 角标尺寸尽量小巧，避免遮挡过多图片内容。
- 可配合伪元素实现更简洁的样式，例如用 ::before 添加图标类角标。
- 移动端注意角标是否被缩放影响可读性，建议使用 rem 或 vw 单位。
基本上就这些。只要掌握“父 relative + 子 absolute + 定位偏移”的模式，就能灵活控制角标位置。不复杂但容易忽略细节。
