底部固定悬浮条容器必须设 position: relative，否则红点会相对于 body 定位而飘出屏幕；应配合 display: flex 和 ::after 伪元素实现圆心对齐的红点，并用 data-unread 属性控制显隐及同步 aria-label。
底部固定悬浮条容器必须设 position: relative
很多红点飘到屏幕右上角甚至页面外，根本原因就是父容器没加 position: relative。底部悬浮条通常是 <nav class="bottom-nav"></nav> 或 <div class="fixed-bottom-bar"> 这类结构，它必须显式声明定位上下文，否则 <code>::after 伪元素或 <span class="badge"></span> 会相对于 定位。
常见错误写法：<nav><span class="badge"></span>消息</nav> —— 没有 position: relative，红点就“脱钩”了。
- 给悬浮条容器加
position: relative，同时建议加display: flex或display: inline-flex，避免行内元素基线干扰定位 - 若容器本身是
position: fixed（如底部导航），relative依然要加——两者不冲突，fixed定义视口锚点，relative提供子元素绝对定位的参考系 - 别用
position: absolute直接套在上模拟“底部固定”，那样无法绑定消息状态，也不利于可访问性
::after 伪元素实现红点比额外 DOM 更轻量
在底部按钮（比如消息图标）上直接加 ::after，不用多写一个 <span></span>，结构干净、语义清晰，也避免因 JS 删除节点导致的动画中断。
关键样式必须包含这四点：content: ""、position: absolute、top: 0; right: 0、transform: translate(50%, -50%)。漏掉 transform 就会偏移——因为 top: 0; right: 0 是把左上角钉在角点，而我们要的是圆心对齐。
- 尺寸写死：
width: 8px; height: 8px，禁用em或rem，否则字体缩放时红点会变大变形 - 颜色用
background-color: #ff4757（小红点常用色），别用red，太刺眼且在 OLED 屏上发灰 - 移动端适配：加
@media (max-width: 768px) { .msg-icon::after { width: 6px; height: 6px; } } - 高对比度模式兜底：加
border: 2px solid currentColor，确保即使背景色被系统强制替换，仍有可见轮廓
用 data-unread 控制显隐比 class 切换更可靠
很多人写 .msg-icon.unread::after，然后靠 JS 切换 unread class。但异步清空未读数后，DOM 更新和 class 切换不同步，容易出现“已读了红点还在”的错觉。改用 data-unread="1" 属性驱动，CSS 选择器写成 [data-unread="1"]::after，语义更强，也更容易和后端状态对齐。
- 初始 HTML 写成：
<button class="msg-icon" data-unread="1" aria-label="消息（3条未读）"></button> - CSS 显隐只靠属性存在与否：
[data-unread]::after { opacity: 1; }+[data-unread="0"]::after, [data-unread=""]::after { opacity: 0; pointer-events: none; } - JS 更新只需一行：
msgBtn.dataset.unread = "0"，无需操作 class，也不会漏掉 DOM 节点 - 必须同步更新
aria-label，例如从"消息（3条未读）"改为"消息（已读）"，否则屏幕阅读器无法感知状态变化
红点位置总偏移？先检查图标 display 类型
红点贴不住右上角，90% 是因为图标用了 <i></i> 或 <svg></svg> 且没设 display。默认 inline 元素受 line-height 和基线（baseline）影响，top: 0 实际对齐的是文本基线，不是视觉顶边。
- 给图标加
display: inline-block或display: block，彻底脱离行内布局干扰 - 如果图标是
<svg></svg>，确保它没有vertical-align或额外margin，必要时重置：vertical-align: top; margin: 0; - 不要靠调
top: -4px这种魔法数字硬凑——换字体、换字号、换设备就失效；transform: translate(50%, -50%)才是真正锚定圆心的解法 - 用浏览器 DevTools 的 “Layout” 面板打开“Show box model”，一眼就能看出图标盒模型是否撑满、有没有意外空白
