角标定位不准主因是父容器未设position: relative，导致绝对定位角标锚定到html或视口；需为卡片显式添加position: relative，并检查padding、transform、overflow、z-index及层叠上下文是否干扰。
角标定位不准，八成是父容器没设 position: relative，导致 position: absolute 的角标直接锚定到 或视口，而不是你预期的卡片上。
父容器必须显式加 position: relative
绝对定位元素会逐级向上找第一个 position 不为 static 的祖先。卡片容器（比如 .card）默认是 static，不构成定位上下文——角标就会“飞走”。
- 给卡片外层元素加
position: relative，哪怕它只是个<div class="card"> <li>别依赖 <code>display: flex或float自动提供定位能力，它们不会 - 如果卡片嵌在 UI 库组件里（如 Bootstrap 的
.card），检查它是否被外层position: relative覆盖或干扰 - 临时加
outline: 1px solid red看红色框是否紧贴你期望的定位边界 - 若卡片父级用了
transform（哪怕只是translateZ(0)），它会创建新的 containing block，参考点可能变成 border box - 避免同时写
left和right——它们会挤压宽度；同理top+bottom会影响高度 - 确认卡片没意外继承
overflow: hidden（某些 UI 库默认加了） - 用
clip-path替代裁剪：例如clip-path: path('M0,0 H16 V16 H0 Z')，需配合角标尺寸微调 - 响应式场景优先用
calc()或媒体查询：比如@media (max-width: 768px) { .badge { top: 4px; right: 4px; } } - 更稳的右上角对齐写法：
top: 0; right: 0; transform: translate(50%, -50%)，让角标右上角精准顶到父容器右上角 - 给角标加
z-index: 1（或更高），并确保其父容器（即那个position: relative的卡片）也有明确z-index（哪怕只是1） - 避免把角标挂到
document.body下——它会脱离卡片的层叠上下文，z-index失效 - 若卡片内部用了
position: absolute的标题或按钮，它们可能脱离文档流，导致卡片高度塌陷，进而影响角标top计算基准 - 用
getBoundingClientRect()在控制台验证真实位置：document.querySelector('.badge').getBoundingClientRect()
top/right 值生效但位置偏移？查 padding 和 transform
top: 0; right: 0 是以父容器的 padding box 左上角 为原点，不是 border 边缘。若卡片有 padding: 16px，角标实际贴在内边距起始处，看起来就“离边太远”。
角标被圆角裁掉或响应式下错位
这不是定位错了，是渲染裁剪问题：border-radius 配合 overflow: hidden 会把超出边界的角标截掉；而固定像素值（如 top: 8px; right: 8px）在小卡片里会溢出，在大卡片里又太靠里。
立即学习“前端免费学习笔记（深入）”；
z-index 失效、被内容盖住或点击不到
角标虽定位正确，但视觉被卡片文字/图片遮挡，或点击区域“落空”，通常和层叠上下文断裂有关。
真正麻烦的不是写错一行 CSS，而是多个因素叠加：父容器没 relative、内部有 transform、外层套了 overflow: hidden、还混着 flex 和 z-index 层级。调试时先用 outline 显形盒子，再逐级检查 computed styles 里的 Containing block 和 Stacking context，比硬调数值快得多。
