红点精准锚定图标右上角的核心是建对定位上下文：父容器必须显式设position: relative，红点用top: 0; right: 0; transform: translate(50%, -50%)定位，配合z-index≥99并避免overflow: hidden。
红点必须挂到图标右上角，且不随缩放、内边距、RTL变化而偏移——核心不是“怎么写样式”，而是“定位上下文是否建对了”。
父容器必须显式设 position: relative
Flex 容器本身不是天然的定位上下文。即使它用了 display: flex，子元素设 position: absolute 时，浏览器仍会向上查找最近的 position: relative / absolute / fixed 父级。没找到就落到 body 上，红点直接飞到页面右上角。
- 别依赖 Flex 容器“默认可定位”——这是常见误判，
display: flex不等于position: relative - 给图标外层包装元素（比如
<button></button>或<div class="icon-wrapper">）加 <code>position: relative - 避免直接给
<i></i>或<svg></svg>加position: relative，它们是内联元素，加了可能破坏行高或换行逻辑 - 正确姿势：
top: 0; right: 0; transform: translate(50%, -50%) - 原理：让红点左上角贴父容器右上角，再向右、向上各偏移自身宽高一半，视觉中心精准锚定在角点外侧
- 若红点是
8px × 8px圆，translate(50%, -50%)等效于向右移 4px、向上移 4px，比硬编码像素值鲁棒得多 -
z-index至少设为99：Bootstrap 的.badge默认无z-index，常被按钮边框、卡片阴影、导航栏z-index: 10盖住 - 检查父容器是否含
overflow: hidden：Flex 容器、卡片、导航栏封装类里很常见，它会裁掉所有超出边界的absolute子元素，再高的z-index也无效 - 不要在红点上加
margin或依赖align-self：这些对absolute元素完全无效
红点用 transform: translate(50%, -50%) 而非负 top/right
写 top: -4px; right: -4px 看似简单，但一遇到字体缩放、rem 变化、transform: scale() 或父容器 padding，红点立刻错位甚至被裁切。
z-index 和 overflow 是红点“消失”的两大元凶
红点渲染出来了却看不见？90% 是被层级或裁剪吞掉了，不是样式写错了。
真正难的不是画一个红点，而是让它在图标尺寸变化、文字缩放、RTL 切换、父容器有 transform 或 clip-path 时，依然稳稳钉在右上角——这取决于你有没有把 position: relative 加在那个真正包裹图标的、尺寸稳定的容器上，而不是随便套一层 div 就完事。
