CSS角标实现需父容器设position: relative，角标用absolute定位并配合方向属性与transform微调；须设z-index、固定尺寸及圆角等确保显示完整。
用 CSS 给元素加角标，核心就两点：父容器设 relative，角标本身用 absolute 定位，并配合 top/right/bottom/left 锁定位置。细节不到位，角标就容易跑偏或被遮挡。
父容器必须设 position: relative
这是最关键的一步。absolute 定位的元素会逐级向上找最近的「已定位祖先」（即 position 不是 static 的元素）。如果父容器没设 relative，角标就会相对于 body 或更外层定位，完全脱离图片或按钮。
- 给图片、按钮、卡片等包裹容器加上
position: relative - 推荐同时加
display: inline-block或display: block，避免 inline 元素导致定位异常 - 不要依赖 float 或 flex 父容器自动提供定位上下文——它不会
角标用 absolute + top/right 精准贴角
右上角是最常见需求，直接用 top: 0; right: 0; 即可。但默认是以角标左上角为锚点，所以常需微调。
- 让角标中心对齐右上顶点：加
transform: translate(50%, -50%) - 若要右上角内侧（不超出边界），去掉 transform，改用
top: 4px; right: 4px;留白 - 左上、左下、右下同理，只需换对应方向属性，比如左下：
bottom: 0; left: 0;
确保显示层级和视觉完整
角标常被父元素内容盖住，或尺寸太小看不清，这些都得提前处理。
立即学习“前端免费学习笔记（深入）”；
- 加
z-index: 1或更高值，保证压在图片/文字上方 - 设置固定
padding和min-width，避免文字过短时角标塌缩 - 用
border-radius控制圆角，line-height: 1防止行高撑开高度 - 文字建议用
text-transform: uppercase或font-size: 10–12px，保持紧凑感
进阶：带三角指示或动态状态的角标
纯色矩形角标之外，有些场景需要箭头指向、新消息提示或红点型标记。
- 红点类：宽高设为 8px，
border-radius: 50%，用box-shadow增强视觉存在感 - 三角角标：用伪元素
::after，结合border技巧，如border-top: 6px solid #f00; border-right: 6px solid transparent; - 旋转标签：用
transform: rotate(-45deg)+translateZ(0)触发 GPU 加速，防锯齿
