父容器漏设 position: relative 是红点飞走的首要原因，必须显式给卡片容器加该属性，且徽章需设宽高、用 transform: translate(50%, -50%) 精准锚定右上角。
父容器漏设 position: relative 是红点飞走的首要原因
徽章没出现在卡片右上角，大概率是父容器没加 position: relative。浏览器会把 position: absolute 的徽章往上找最近的定位祖先——通常是 ，结果红点直接钉在视口右上角，和卡片毫无关系。
必须显式给卡片容器（比如 .card 或 .avatar）加上 position: relative。别指望 flex 容器或 inline 元素“自动生效”，它们默认是 static，不构成定位上下文。
- 如果卡片本身是
<span></span>或<img>这类内联元素，得先加display: inline-block才能让position: relative生效 - 避免用
<div> 直接包图标再设 <code>relative，若该div没宽高、又没内容撑开，徽章锚点会塌陷 - 推荐用包裹层：比如
<div class="card-wrapper"><div class="card">...</div></div>，把relative放在.card-wrapper上更稳妥 - 先写
top: 0; right: 0;把徽章左上角钉到父容器右上角顶点 - 再加
transform: translate(50%, -50%);—— 向右移自身宽度一半、向上移自身高度一半，视觉上就“挂”在角上了 - 这要求徽章必须有明确
width和height（比如width: 8px; height: 8px;），否则translate无法计算 -
z-index至少设为10，1在现代 UI 中基本不够用；尤其当卡片带阴影、导航栏有固定层级时，99更保险 - 检查父容器是否写了
overflow: hidden—— 它会裁剪所有子元素，包括absolute徽章，z-index再高也没用 - 更隐蔽的是：父容器用了
transform（比如scale(0.95)或rotate()），会创建新层叠上下文，此时徽章的z-index只在该上下文内有效；需同步提升父容器层级，或改用will-change: transform避免意外触发 - 别用
right: 5px这类固定像素做偏移——小屏时 5px 占比变大，徽章容易压住图标边缘 - 统一用
rem或em（如right: 0.25rem;），配合根字体大小动态缩放 - 如果徽章要随父容器等比缩放（比如卡片图标用
width: 100%），确保父容器有明确宽高比，或用aspect-ratio锚定 - 移动端小屏下优先检查
transform是否被缩放影响：只要徽章width/height是固定值，translate(50%, -50%)就依然精准；但若用了font-size控制大小，就得搭配clamp()或媒体查询重置
用 top: 0; right: 0; transform: translate(50%, -50%) 替代负值偏移
top: -4px; right: -4px 看似简单，但一换字体、一缩放、一加 padding 就偏。它依赖硬编码像素，和徽章自身尺寸无关，也不随父容器响应变化。
真正稳定的做法是让徽章“以自身中心为锚点”去对齐父容器角落：
示例：.badge { width: 8px; height: 8px; border-radius: 50%; top: 0; right: 0; transform: translate(50%, -50%); }
z-index 不够高 + overflow: hidden 是红点“消失”的两大元凶
红点渲染了但看不见？不是没生效，是被盖住或裁掉了。
响应式下徽章错位或压边，本质是单位和锚点没对齐
PC 正常、手机变小后红点贴不住角，甚至被裁切，问题不在媒体查询没写，而在于定位逻辑本身不响应。
最易被忽略的一点：徽章的 border 和 box-sizing 必须明确。没设 box-sizing: border-box 时，width: 8px 加 border: 1px solid #fff 实际占 10px，translate(50%, -50%) 就会偏移过度。
