必须给头像外层容器加 position: relative，否则红点会因找不到定位上下文而贴在视口右上角；正确做法是用块级容器包裹 img 并设该容器为 relative，再对红点使用 top: 0; right: 0; transform: translate(50%, -50%) 定位。
必须给头像外层容器加 position: relative，否则 position: absolute 的红点会跑到视口右上角——这是移动端角标错位的唯一高频原因。
为什么父容器一定要设 position: relative
绝对定位元素会向上查找最近的「已定位祖先」作为参考系。头像通常是 <img alt="如何使用CSS绝对定位给移动端头像右上角添加红点角标？" >，默认 position: static，不构成定位上下文；如果外层没显式设 position: relative，红点就会一路找到 ，直接贴在屏幕右上角，和头像毫无关系。
- 别给
<img alt="如何使用CSS绝对定位给移动端头像右上角添加红点角标？" >自身加position: relative—— 它是替换元素，高度不可靠，会导致定位基准偏移 - 必须用块级容器包裹，比如
<div class="avatar-wrapper"><img alt="如何使用CSS绝对定位给移动端头像右上角添加红点角标？" ></div>，然后给这个<div> 加 <code>position: relative - 如果头像本身在
flex或grid容器里，也要确认该容器有position: relative，否则子项的定位仍会失效 - 红点需有明确宽高，例如
width: 12px; height: 12px; border-radius: 50% - 若头像尺寸响应式变化（如
40px / 64px），该组合依然有效；硬写top: -4px; right: -4px在不同尺寸下极易错位 - 避免用负
margin微调——它会触发重排，动画中易抖动；transform不影响文档流，性能更稳 -
overflow: hidden裁剪：头像容器若用了border-radius: 50%并配了overflow: hidden（常见于圆形裁剪），红点会被直接切掉；解决方法是提升层级：z-index: 2，并确保父容器z-index不为auto - 点击穿透失效：红点默认会挡住背后头像的点击区域；加
pointer-events: none即可，但如果红点内部有清除按钮等交互元素，再单独给它设pointer-events: auto - 别在红点上用
opacity: 0.9——它会创建新的 stacking context，干扰z-index层级，导致被其他元素盖住
top: 0; right: 0; transform: translate(50%, -50%) 是最稳的锚定组合
只写 top: 0; right: 0 会让红点左上角顶到父容器右上角，视觉上明显“浮”在外面；而加上 transform 后，红点中心对齐锚点，右上角自然贴合目标边缘，且不依赖固定像素值。
移动端必须处理的两个隐藏陷阱
即使定位完全正确，红点也可能看不见或点不到，常见于：
立即学习“前端免费学习笔记（深入）”；
真正难的不是写几行 CSS，而是记住：红点的定位行为完全由它的父容器是否「构成定位上下文」决定；漏掉那行 position: relative，后面所有微调都白搭。
