角标需用 position: absolute + 父容器 position: relative 定位，避免被裁或遮挡；推荐 transform: translate(50%, -50%) 微调位置；border 绘三角最兼容；务必设 z-index 并避免 opacity 干扰堆叠上下文。
直接用 position: absolute + position: relative 父容器就能稳住，但不设 overflow: hidden 或不调 z-index，标记大概率被裁掉或盖住。
头像容器必须设 position: relative
绝对定位的角标会向上找最近的「有定位属性」的祖先。头像本身通常是 <img>，它默认是 position: static，撑不起子元素定位参照——角标就会飞到 body 右上角。
- 给头像外层
div（比如class="avatar-wrapper"）加position: relative - 别对
<img>本身设position: relative，它不是块级容器，无法形成定位上下文 - 如果用
flex或grid布局包裹头像，也要确保该父容器有position: relative
角标定位常用组合：微调比硬靠边更可靠
top: 0; right: 0 看似合理，但实际常卡进头像圆角里，尤其头像带 border-radius 或 padding 时。
- 推荐写法：
top: -2px; right: -2px，轻微外移避开裁剪 - 更稳的写法：
top: 0; right: 0; transform: translate(50%, -50%)，让角标中心对齐右上角锚点 - 若头像尺寸不固定（如响应式 40px / 64px），用
right: calc(50% + 2px)比写死像素更适应
圆角三角形标记用 border 实现最兼容
渐变背景或 clip-path 虽然灵活，但在旧版 Safari 或安卓 WebView 中容易失真；border 绘三角是经过验证的稳妥方案。
- 核心代码：
border-width: 8px 8px 0 0; border-color: #E99950 transparent transparent transparent; - 配合
position: absolute; bottom: 0; right: 0;放在伪元素::after上 - 注意：
border-style: solid必须显式声明，否则部分浏览器不渲染 - 若需圆角效果，在三角形外层再套一层带
border-radius的容器，而非强行给三角加圆角（border-radius对border三角无效）
z-index 和 overflow 是隐藏杀手
即使定位完全正确，角标仍可能看不见——常见于两个原因：被父容器裁掉，或被同级元素压在下面。
- 头像容器若设了
overflow: hidden（用于圆形裁剪），角标会被直接切掉；此时必须提升层级：z-index: 2，且确保父容器z-index不为auto - 同级元素（如头像旁的文字、图标）若没设
z-index，默认堆叠顺序可能盖住角标；建议角标统一设z-index: 10以上 - 避免在角标上用
opacity: 0.9之类透明度，它会创建新的 stacking context，干扰层级判断
真正麻烦的从来不是画出三角形，而是让它在各种头像尺寸、裁剪方式、嵌套层级下始终露出来——多试一次 z-index，比多调三次 top/right 更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
