父容器必须设 position: relative，否则绝对定位角标会脱离父元素飞到页面右上角或不可见；应使用包裹元素而非替换元素作为定位上下文，并配合固定像素偏移、clip-path 替代 overflow:hidden 等方案确保精准显示。
父容器必须设 position: relative
角标飞到页面右上角或完全不可见，90% 是因为没给包裹容器加 position: relative。浏览器里 position: absolute 的元素会逐级往上找「最近的已定位祖先」，如果找不到，就落到 body 上——跟图片、按钮完全脱钩。
别给 <img> 或 <i> 直接加 position: relative：它们是替换元素，不支持 overflow: hidden，且某些场景下会触发意外布局偏移。
- 用一个包裹
<div class="icon-wrapper">或<span class="badge-container">，显式设position: relative - 同时加
display: inline-block或display: block，避免 inline 元素 baseline 对齐导致定位基准漂移 - 不要指望 flex 容器自动提供定位上下文——
display: flex本身不改变定位行为，仍需手动加position: relative
top 和 right 值怎么写才不飘不切
写 top: 0; right: 0; 看似最直接，但实际常被圆角裁掉一半，或在小尺寸图标上溢出。根本原因不是值错了，而是参考系和父容器约束没对齐。
- 优先用固定像素微调，比如
top: -4px; right: -4px;（适用于 24px 图标 + 16px 角标） - 避免
right: 10%：百分比是按父容器宽度算的，不是角标自身尺寸，极易反直觉 - 响应式场景下，改用
calc(1rem - 4px)或 CSS 自定义属性联动图标尺寸，比媒体查询硬切更可持续 - 如果父容器有
border-radius或overflow: hidden，先临时设为overflow: visible测试；真要保留圆角，用clip-path替代裁剪更可控
用 ::after 还是单独 <span>？
伪元素 ::after 更轻量、不增加 DOM 节点，适合纯视觉提示（如红点、数字“99+”）；但内容不可读、不可聚焦，重要状态信息（如“新消息”）必须配合 aria-label 或用真实元素。
立即学习“前端免费学习笔记（深入）”；
-
::after必须声明content: ""（哪怕空字符串），否则不渲染 - 若父元素是
<i>或<svg>，记得加vertical-align: middle，否则 baseline 对齐会让角标上下错位 - 动态数字（如 React 中
count={5}）无法通过content绑定，此时必须用真实子元素，或 JS 注入文本 - 文字型角标务必配
line-height等于高度，否则border-radius再圆也压不住文字基线偏移
三角形角标和旋转类角标容易崩在哪
三角形靠 border + 旋转实现，旋转类（如 45° 斜贴）靠 transform，这两类在缩放、高 DPI 或横竖屏切换时特别脆弱。
- 用
border画三角时，border-width设为10px，实际显示边长≈14.14px（√2 倍），设计稿给 10px 就得按比例换算 - 旋转类角标慎用
transform: translate(-50%, -50%)：它依赖自身宽高，而字体缩放或弹性布局会让宽高不稳定，优先用top/right+ 固定偏移 -
transform-origin必须明确设（如transform-origin: right top），否则旋转锚点飘移，尤其在width不固定时 - 所有旋转类角标都要配
z-index: 1，否则容易被父容器阴影或兄弟元素遮住
真正卡住人的从来不是怎么写 top 和 right，而是忘了 position: relative 这一行，或者没意识到 overflow: hidden 和 border-radius 正在悄悄切掉你的角标。
