使用 position: absolute 实现右上角红点徽章时，父容器必须设 position: relative（或 absolute/fixed），红点用 width/height + border-radius 圆形化，推荐 top: 0; right: 0; transform: translate(50%, -50%) 精准锚定，配合 z-index: 1 防遮挡，并用 rem 单位和媒体查询保障响应式适配。
position: absolute 配合 top/right 实现右上角红点
数字徽章的红点要贴在右上角，核心就是脱离文档流后手动“钉”过去。用 position: absolute 是最直接、兼容性最好的方式，但必须确保父容器有 position: relative（或 absolute/fixed），否则 top 和 right 会相对于 viewport 定位，导致红点飞到屏幕角落。
- 父元素漏加
position: relative是最常见错误，红点位置完全失控 - 红点本身推荐用
width: 16px; height: 16px;+border-radius: 50%，避免用font-size控制大小，否则小屏下易变形 - 如果父元素是 inline 元素（比如
<span></span>），需先设display: inline-block，否则position: relative不生效 -
top: -4px; right: -4px;是常用偏移值，但实际要根据父元素 padding 和字体大小微调，不能硬套
transform: translate 调整红点位置更稳定
纯靠 top/right 往往要反复试值，尤其当父容器尺寸动态变化时。用 transform: translate(50%, -50%) 配合 top: 0; right: 0; 可以让红点真正“锚定”在右上角顶点，再微调偏移更直观。
- 写法是：
top: 0; right: 0; transform: translate(50%, -50%); - 注意：
translate基于自身宽高，所以红点必须有明确width和height，否则偏移不可控 - IE10+ 支持，老项目若需兼容 IE9，得退回纯
top/right方案 - 不要和
margin混用——transform已经是视觉位移，再加margin会叠加错乱
z-index 层级冲突导致红点被遮挡
红点明明写了 position: absolute，却显示不出来？大概率是被兄弟元素盖住了。它默认 z-index 为 auto，不参与层叠上下文比较。
- 给红点加
z-index: 1通常够用，但若父容器有z-index且不是auto，红点会受限于父容器的层叠上下文 - 检查父容器是否意外触发了层叠上下文（比如有
opacity 、<code>filter、will-change） - 避免全局写
z-index: 9999，不同模块之间容易打架；建议按模块定义基础层级，如.badge { z-index: 10; }
响应式下红点位置错位或消失
PC 正常，手机一缩就偏了或者不见了，问题往往出在单位和媒体查询没对齐。
立即学习“前端免费学习笔记（深入）”；
- 红点的
top/right值别用固定像素（如right: 8px），改用em或rem更稳妥，比如right: 0.25rem; - 如果父元素用了
flex布局，某些旧版 Safari 对position: absolute子元素支持不好，可加align-self: flex-start;强制对齐 - 媒体查询里重置红点位置时，记得同步调整
transform的百分比值——比如小屏下红点变小了，translate(50%, -50%)仍有效，但top: 0可能需要补margin-top微调
红点看着小，但一旦嵌在复杂布局或跨组件复用，position、z-index、transform 三者稍有不匹配，就会出现飘、盖、丢的问题。最省事的解法不是堆 CSS 技巧，而是从父容器开始就明确它的定位上下文和尺寸边界。
