角标飞走的根本原因是父按钮未设position: relative，导致absolute角标回退至body定位；必须显式添加该声明，并配合top/right微调、伪元素动态渲染及overflow检查。
按钮没设 position: relative，角标就飞走
这是最常踩的坑：角标用了 position: absolute，但父按钮没声明定位上下文，结果角标直接相对于 body 定位，出现在页面右上角而非按钮右上角。
- 必须给按钮加
position: relative，哪怕它原本是inline元素 - 避免依赖
flex或grid父容器“自动提供定位”——它们不会 - 如果按钮被封装在组件里，检查外层 wrapper 是否设置了
overflow: hidden，这会裁掉角标
top 和 right 值怎么调才不盖字、不溢出
用 top: 0; right: 0; 是锚点起点，但角标默认以左上角为基准，不微调就会紧贴按钮边缘甚至压住文字末尾。
- 推荐起始值：
top: -6px; right: -6px;（配合按钮padding: 8px时较稳妥） - 若按钮字体大或行高高，改用
top: calc(-50% - 2px); right: calc(-50% - 2px); transform: translate(100%, -100%)更精准对齐顶点 - 角标本身要设
border-radius: 50%、font-size: 12px、line-height: 1、padding: 2px 5px控制视觉尺寸 - 别让角标宽度超过按钮内边距余量，否则在
width: 120px这类固定宽按钮里会撑破边界
用 data-badge + ::after 实现动态内容
硬写 <span>3</span> 不灵活，数量变时得操作 DOM；用属性驱动伪元素，JS 只需改属性值即可。
- HTML：
<button class="btn" data-badge="5">购物车</button> - CSS：
.btn[data-badge]::after { content: attr(data-badge); position: absolute; /*其他定位样式*/ } - 禁用态同步隐藏：
.btn:disabled[data-badge]::after { opacity: 0; } - 零值隐藏：
.btn[data-badge="0"]::after { display: none; }
移动端和 IE11 的兼容细节不能忽略
看似简单的定位，在旧浏览器和小屏设备上容易出偏移、截断、热区不足等问题。
- IE11 不支持
inset，必须用top/right显式写死 - 移动端点击区域至少
44px × 44px，角标本身小，但可把padding加在包裹它的span上，再设min-width/min-height - 若按钮用了
transform: scale()动画，旧版 Safari 可能导致角标错位，加will-change: transform缓解 - 确保角标
z-index: 1，否则可能被按钮文字或背景遮住
真正卡住人的不是“怎么写绝对定位”，而是 computed 样式里那个没显式写的 position: relative，和父容器悄悄带上的 overflow: hidden。调位置前，先打开开发者工具看一眼“Computed”面板里的定位上下文和 overflow 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
