纯html无法实现可用徽章角标，必须用span+css定位+父容器position: relative；漏设relative会导致角标飘至body定位，top:0;right:0;transform:translate(50%,-50%)是右上角精准对齐黄金组合。
纯 HTML 写不出可用的徽章角标，badge 不是合法 HTML 标签，浏览器会忽略其语义和默认样式；必须靠 span（或伪元素）+ CSS 定位 + 父容器 position: relative 才能稳定实现。
父容器漏设 position: relative 是角标飘走的头号原因
几乎所有“角标跑到左上角”“点击区域失效”“在卡片里突然消失”的问题，都源于 badge 元素的直接父级没加 position: relative。浏览器会逐层向上查找最近的已定位祖先，找不到就落到 上，结果 badge 相对于整个页面定位。
- 错误写法：
<button>消息<span class="badge">3</span></button>——button默认是static，无定位上下文 - 正确写法：
<button style="position: relative;">消息<span class="badge">3</span></button>或用 class 封装 - 若目标是
<img>，不能直接给它加relative（部分浏览器不支持），必须包一层<div class="position-relative"><img></div>
top: 0; right: 0; transform: translate(50%, -50%) 是右上角对齐黄金组合
只写 top: 0; right: 0 是让 badge 的左上角顶到父容器右上角，视觉上明显偏右偏上；加上 transform: translate(50%, -50%) 才能让 badge 自身中心点精准锚定在右上角内侧边缘，适配不同字号、padding 和缩放场景。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 别用负
margin微调（如margin-top: -4px），一旦字体或内边距变化就得重算 - 避免用
%或em写top/right值——父级font-size变动会导致偏移漂移，统一用px或rem - 如果父容器本身有
transform（比如动画、缩放），绝对定位会失效，但transform: translate()仍可靠
动态数字角标必须用真实 DOM 节点，别依赖伪元素
用 ::after + attr(data-badge) 看似简洁，但 IE 不支持，且无法被屏幕阅读器读出数字内容；真正需要可访问、可复制、可翻译的角标，数字必须是真实文本节点。
- React/Vue 中，别手动操作
.badge的textContent，应走框架状态驱动：{count > 0 && <span classname="badge">{count}</span>} - 数字为 0 时，**不渲染 badge 元素本身**，而不是
display: none—— 后者仍占 DOM 节点，干扰焦点流和无障碍树 - 超过 99 的数字建议服务端或逻辑层截断：
Math.min(count, 99)，再额外传isOverflow控制显示 “99+”
navigator.setAppBadge() 和页面内角标完全无关
有人搜“HTML Badge API”，误以为能用 JS 一行代码改页面图标角标——其实 navigator.setAppBadge() 只作用于已安装的 PWA 在系统任务栏、Dock 或开始菜单的图标上，和你写的 <span class="badge"></span> 毫无关系。
- 它不操作任何 DOM，也不影响网页内视觉
- 调用必须在用户手势后（如按钮点击），且仅在 HTTPS 或 localhost 下生效
- 参数只能是 1–99 的整数，传
"99+"或0会直接报错，控制台显示TypeError: Invalid badge value
最易被忽略的细节：父容器若有 overflow: hidden（常见于头像、卡片、图标按钮），角标超出部分会被裁掉，加 z-index 也救不回来——要么改父容器样式，要么换布局方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
