用 absolute + 负 top/right 易错位，因负值硬编码且受父容器内边距、缩放、transform 等影响；必须给父元素设 position: relative，并用 transform: translate(50%, -50%) 精准锚定右上角，配合 z-index ≥99 和避免 overflow: hidden。
为什么用 absolute + 负 top/right 容易错位
直接写 top: -5px; right: -5px 看似简单，但实际会因父容器内边距、字体大小变化、缩放或 transform 影响而偏移失控。尤其在响应式场景下，小屏时红点可能被裁切或压住图标边缘。根本原因是负值是“硬编码”，没和父容器尺寸或徽章自身尺寸对齐。
absolute 定位红点必须配 position: relative 在父级
这是最常漏掉的一环。如果只给红点加 position: absolute，浏览器会向上找最近的非 static 定位祖先——大概率落到 上，导致红点飞到页面右上角。
- 必须在目标元素（如
<li class="nav-item">或<div class="avatar">）上显式设置 <code>position: relative - 避免对
<a></a>或<span></span>这类内联元素直接设position: relative后又加display: block，可能破坏原有流式布局 - 稳妥做法：用包裹层（如
<div class="nav-item-wrapper">）承担定位职责 <h3>用 <code>transform: translate()替代负margin微调更可靠负
margin依赖固定像素值，而translate()基于自身宽高，缩放、rem切换、甚至scale()动画下都能保持对齐。- 右上角红点推荐写法：
top: 0; right: 0; transform: translate(50%, -50%);—— 把红点中心精准锚定在父容器右上角 - 若红点是
8px × 8px圆形，translate(50%, -50%)相当于向右移 4px、向上移 4px，视觉上“挂”在角上 - 不要混用：
top: -4px; right: -4px; transform: translate(0, 0)是冗余且脆弱的写法 - 配合
border-radius: 50%和width: 8px; height: 8px才能确保是正圆，不是椭圆
z-index不够高时红点会被遮住很多情况下红点渲染出来了，但看不见——不是没显示，是被兄弟元素盖住了。尤其是导航栏有
overflow: hidden、卡片有阴影层、或按钮带z-index时。-
z-index: 10是底线，但实战中常见需设为99或999 - 检查父容器是否设置了
overflow: hidden：它会裁剪子元素，包括absolute元素，即使z-index再高也白搭 - 如果父容器用了
transform（比如scale(0.95)），它会创建新的层叠上下文，此时红点的z-index只在该上下文内生效，必须同步提升父容器层级
红点本身不占文档流，但它的定位上下文和堆叠行为非常敏感。真正难的不是画一个圆，而是让它在各种缩放、嵌套、动画、溢出控制下始终“钉”在该在的位置——这取决于你是否把
relative加对了地方、transform用对了方向、z-index设对了层级。 - 右上角红点推荐写法：
