红点飘到右上角是因父元素未设position: relative，导致伪元素相对body定位；应给目标容器设relative，用transform: translate(50%, -50%)替代负top/right，z-index至少10且防overflow:hidden裁切，动态数字须用真实子元素而非伪元素content。
为什么红点总飘到页面右上角？
这是最常踩的坑：只给伪元素写 position: absolute，却没在父元素上设 position: relative。浏览器会一路往上找最近的已定位祖先，大概率落到 <body> 上，红点就飞走了。
- 必须在目标容器（比如 <li class="nav-item"> 或 <div class="icon-wrapper">）上显式加 position: relative
- 别对 <a> 或 <span> 这类内联元素直接设 position: relative 后又强制 display: block，容易破坏原有布局流
- 更稳妥的做法是用包裹层承担定位职责，比如 <div class="icon-container"><svg></svg></div>top/right 负值 vs transform: translate()，该选哪个？
写死 top: -6px; right: -6px 在缩放、高 DPI 屏或响应式尺寸变化时极易错位；而 transform: translate(50%, -50%) 是基于自身宽高计算的，更鲁棒。
- 推荐组合：top: 0; right: 0; transform: translate(50%, -50%) —— 把 8px × 8px 的圆点中心精准锚定在父容器右上角
- 不要混用 top 和 transform 做双重偏移，冗余且难调试
- content: "" 必须写，否则伪元素不渲染；别依赖 font-size: 0 控制大小，直接用 width/height红点显示了但看不见？z-index 和 overflow 是元凶
红点渲染成功但“消失”，90% 是被遮挡或裁切：
- z-index: 10 是底线，实战中常需 99 或 999，尤其当父容器有阴影、卡片有 z-index、导航栏用了 fixed
- 检查父容器是否设了 overflow: hidden：它会裁剪子元素，哪怕 z-index 再高也白搭
- 若父容器用了 transform（比如 scale(0.95)），它会创建新层叠上下文，此时红点的 z-index 只在该上下文内生效，必须同步提升父容器层级
动态数字怎么塞进红点里？content 不行，得换方案content 是纯 CSS 值，无法绑定 JS 变量。React/Vue 里 count={99} 这种写法，用伪元素根本做不到。
- 正确做法：用真实子元素，比如 <span class="badge">99+</span>，再配绝对定位
- 或 JS 注入文本：el.querySelector('.badge').textContent = count
- 纯 CSS 动态控制显示/隐藏只能靠类名切换（如 .has-unread），别试图用 style.display = "none" 隐藏伪元素——无效
top: -6px; right: -6px 在缩放、高 DPI 屏或响应式尺寸变化时极易错位；而 transform: translate(50%, -50%) 是基于自身宽高计算的，更鲁棒。
- 推荐组合：top: 0; right: 0; transform: translate(50%, -50%) —— 把 8px × 8px 的圆点中心精准锚定在父容器右上角
- 不要混用 top 和 transform 做双重偏移，冗余且难调试
- content: "" 必须写，否则伪元素不渲染；别依赖 font-size: 0 控制大小，直接用 width/height红点显示了但看不见？z-index 和 overflow 是元凶
红点渲染成功但“消失”，90% 是被遮挡或裁切：
- z-index: 10 是底线，实战中常需 99 或 999，尤其当父容器有阴影、卡片有 z-index、导航栏用了 fixed
- 检查父容器是否设了 overflow: hidden：它会裁剪子元素，哪怕 z-index 再高也白搭
- 若父容器用了 transform（比如 scale(0.95)），它会创建新层叠上下文，此时红点的 z-index 只在该上下文内生效，必须同步提升父容器层级
动态数字怎么塞进红点里？content 不行，得换方案content 是纯 CSS 值，无法绑定 JS 变量。React/Vue 里 count={99} 这种写法，用伪元素根本做不到。
- 正确做法：用真实子元素，比如 <span class="badge">99+</span>，再配绝对定位
- 或 JS 注入文本：el.querySelector('.badge').textContent = count
- 纯 CSS 动态控制显示/隐藏只能靠类名切换（如 .has-unread），别试图用 style.display = "none" 隐藏伪元素——无效
content 是纯 CSS 值，无法绑定 JS 变量。React/Vue 里 count={99} 这种写法，用伪元素根本做不到。
- 正确做法：用真实子元素，比如 <span class="badge">99+</span>，再配绝对定位
- 或 JS 注入文本：el.querySelector('.badge').textContent = count
- 纯 CSS 动态控制显示/隐藏只能靠类名切换（如 .has-unread），别试图用 style.display = "none" 隐藏伪元素——无效
真正难的不是画一个红点，而是让它在缩放、嵌套、溢出控制、动画触发等各种边界条件下，始终“钉”在该在的位置——这取决于你是否把 relative 加对了地方、transform 用对了方向、z-index 设对了层级。
