必须给角标父容器设 position: relative，用 top: 0; right: 0; transform: translate(50%, -50%) 锚定右上顶点，配合 data-unread 属性控制显隐，并注意 overflow 和 z-index 影响。
父容器必须设 position: relative
角标用 ::after 生成，但若父元素是默认的 position: static，它就会向上找最近的已定位祖先——很可能跳到 body 或导航栏上，导致角标飘在页面任意位置，看起来像“被文字挤走”。这不是文字的问题，是定位上下文缺失。
必须给承载图标或按钮的直接父容器加 position: relative。常见错误包括：只给内部 <i></i> 或 <svg></svg> 加，或者误加在文字包裹层上。
- ✅ 正确：按钮外层
<button class="icon-btn"></button>或<div class="nav-item"> 上设 <code>position: relative - ❌ 错误：只在
<i class="bell-icon"></i>上设position: relative，它不包裹角标 - ⚠️ 注意：
display: inline元素（如未显式设display的<span></span>）配合absolute定位时行为不稳定，建议统一设为inline-block或block - 不要用
em或%写top/right值，缩放时易偏移；固定用px或rem - 如果图标本身有
transform: scale()或rotate()，角标会继承——此时需在角标上加transform: none覆盖 - 移动端可加
@media (max-width: 768px) { .badge { width: 6px; height: 6px; } }防止小屏下太突兀 - React 中写
data-unread={unread ? "1" : "0"}，强制字符串化，避免属性被清空 - Vue 中推荐
:attr="{ 'data-unread': unread ? '1' : '0' }"，不依赖v-bind:class的布尔逻辑 - 千万别用
:empty判断——哪怕标签里有个空格，:empty就失效 - 检查浏览器开发者工具里角标是否被父容器的
overflow边框截断（hover 父元素看高亮区域） - 如果父容器本身有
transform（如scale(0.95)），也会创建新的 stacking context，影响z-index生效范围 - 最保险做法：角标
position: absolute后，加pointer-events: none，避免遮挡下方点击
角标用 absolute + top/right + transform 锚定右上顶点
仅写 top: 0; right: 0; 是不够的——这是以角标自身左上角为锚点，而图标/文字的右上角是基线（baseline）附近的位置，两者天然错位。不加 transform，角标大概率会“悬空”或“压字”。
唯一稳定方案是：top: 0; right: 0; transform: translate(50%, -50%)。它把角标中心对齐到父容器右上顶点，彻底绕过字体度量干扰。
data-unread 属性比 class 控制显隐更稳
用 class="show" 控制角标显示，看似简单，但框架（Vue/React）在状态更新时可能删掉整个 class 列表，导致角标意外消失；而 data-unread="1" 是属性，只要 JS 没主动删，它就一直存在。
CSS 写成 [data-unread="1"] .badge { opacity: 1; }，配合 transition: opacity 0.2s 实现淡入，比 display: none 更平滑且不触发重排。
overflow: hidden 会裁掉角标，不是 bug 是设计
如果消息图标在圆形头像、折叠导航栏或卡片里，而父容器设了 overflow: hidden，角标超出部分会被直接裁剪——这不是定位错了，是 CSS 规范行为。
解决路径只有两条：要么改父容器 overflow: visible（常不可行），要么把角标“提级”：给父容器加 position: relative 和 z-index，再确保角标有足够高的 z-index（如 z-index: 1000）。
relative）、锚点校准（transform: translate）、以及渲染边界（overflow 和 z-index）。漏掉任何一层，都会在某个机型或缩放比例下突然失效。
