-top-3和-right-3不准，因其以元素border box为原点，而实际需对齐父容器content edge；若父容器有border/padding，徽章会被压入padding区，应改用top-px/right-px等精准像素补偿，并确保父容器设position: relative。
为什么 -top-3 和 -right-3 经常不准
它们默认以元素自身的 border box 为定位原点，而实际需求（比如徽章贴右上角、按钮对齐输入框内侧）往往要求对齐父容器的 content edge。若父容器或徽章有 border 或 padding，-top-3 就会把徽章顶部 border 压进父容器 padding 区，看起来像“被吃掉一截”。
用 top-px / right-px 替代负偏移
当边框是 1px 时，top-px（等价于 top: 1px）比 -top-3 更精准——它直接补偿像素级基准偏移，不是靠猜间距单位。
- 必须确保父容器有
relative，否则absolute子元素会相对于body定位 -
top-px是 Tailwind 内置类，PurgeCSS 默认保留，无需额外配置 - 别混用
mt-[-3px]：这是 margin 偏移，不改变定位参考点，调试时容易叠加出错
非 1px 边框时怎么微调
边框宽度变了，补偿值就得跟着变。Tailwind 提供了灵活选项：
- 边框为
border-2（2px）→ 用top-0.5（对应0.125rem ≈ 2px） - 需要更直白控制 → 写
top-[2px]，但得确认 PurgeCSS 启用了 arbitrary value 支持 - 绝对避免
-top-2：它等于-0.5rem = -8px，远超补偿所需，徽章容易飞出可视区
验证是否对齐到位
打开浏览器 DevTools → Layout 面板 → 勾选 “Show box model”，观察徽章的 border box 是否与父容器的 content edge（即 padding 内侧）完全贴合。父容器漏掉 relative 是最隐蔽也最常见的失败原因，务必逐层检查定位上下文链。
立即学习“前端免费学习笔记（深入）”；
