必须给父元素设 position: relative，因为 ::before 的 absolute 定位依赖最近已定位祖先；若无，则红点会相对于 body 偏移至角落。
直接给导航菜单项加红点，核心就两点：父容器必须 position: relative，红点用 ::before 或 ::after 伪元素 + position: absolute 定位。其他写法要么错位，要么被遮挡，要么响应式失效。
为什么必须给父元素设 position: relative
因为 ::before 的 position: absolute 是相对于**最近的已定位祖先元素**（即 position 值为 relative、absolute、fixed 或 sticky 的父级）来计算坐标的。如果导航项（比如 <li> 或 <a></a>）没设 position: relative，浏览器会往上找，很可能落到 <nav></nav> 或 上，导致红点飘到页面角落。
- 常见错误：只给伪元素设
absolute，但忘了父级——红点位置完全不可控 - 安全做法：在目标菜单项上加类（如
.has-unread），并统一设置position: relative - 注意：不要对
<a></a>直接设position: relative后又加display: block，可能破坏内联流布局；优先包裹一层<span></span>或用<li>作为定位容器
::before 伪元素红点的最小可用样式
不需要内容、不占文档流、纯视觉提示，::before 比额外加 DOM 元素更轻量。以下是最小可行配置：
.nav-item.has-unread {
position: relative;
}
.nav-item.has-unread::before {
content: "";
position: absolute;
width: 8px;
height: 8px;
background-color: #ff4757;
border-radius: 50%;
top: -2px;
right: -2px;
z-index: 10;
}
-
content: ""必须写，否则伪元素不渲染 -
top/right建议用px而非百分比，避免父级缩放时偏移（尤其在transform或scale场景下） -
z-index: 10是底线值，若菜单有overflow: hidden或兄弟元素带z-index，可能需调高到100以上 - 别依赖
font-size: 0或line-height控制大小——那是老式 hack，现在直接用width/height更稳
动态控制显示/隐藏的两个可靠方式
红点不是永远挂着，得随数据状态切换。纯 CSS 可做，但有边界；JS 驱动更可控。
- CSS 方案：用属性选择器或类名切换，例如
.nav-item[data-unread="true"]::before，配合 JS 动态设dataset.unread。优点是无重排，缺点是无法做动画（opacity可过渡，但display不行） - JS 方案：操作
classList.toggle("has-unread")最稳妥。避免用style.display = "none"隐藏伪元素——无效；也不要用remove()伪元素——根本删不掉 - 注意：Vue/React 中若用
v-if或{unread && <span>...</span>}，等于删 DOM，不如统一走 class 切换，样式层保持一致
移动端和高缩放屏下的偏移问题
在 iPhone Safari 或 Windows 缩放 125% 时，right: -2px 可能变成 -2.5px，导致红点轻微错位甚至半隐。这不是 bug，是 subpixel 渲染特性。
- 缓解方法：把
right和top改成translate，例如transform: translate(100%, -100%)，再配合top: 0; right: 0; - 更彻底的解法：用
inset（Chrome 103+、Safari 16.4+ 支持）：inset: -2px auto auto -2px，语义清晰且抗缩放 - 兼容性兜底：仍保留
top/right，用@supports (inset: 0) { ... }覆盖
真正容易被忽略的，是父容器的 overflow。哪怕只是 overflow: hidden，也会把 absolute 红点直接裁掉——连 z-index 都救不回来。加红点前，先检查父级有没有这个声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
