红点角标偏移的根本原因是定位上下文不明确：父容器未设position: relative，导致absolute伪元素相对body或变形祖先定位，叠加transform、塌陷、viewport偏差等干扰。
伪元素红点角标位置偏移的根本原因
根本不是 ::after 写错了，而是它默认参与文档流、受行内基线对齐和父容器尺寸约束。当你用 position: absolute 却没给父容器设 position: relative，红点就会相对于 body 或最近已定位祖先定位——而那个祖先很可能高度为 0、或被 transform 扭曲了坐标系。
为什么加了 top/right 还是飘走
绝对定位的参照对象不明确，是绝大多数红点错位的直接原因：
-
top: 0; right: 0;不等于“贴右上角”，它只表示“距离定位上下文的上边 0px、右边 0px” - 若父容器没设
position: relative，且祖父元素有transform: scale(0.95)，红点会按缩放后的坐标系计算位置，视觉上明显右偏下移 - 若父容器
height为 0（比如内部全是浮动子项且未清除），top: 0实际落在不可见区域，红点“消失”或出现在意外位置 - iOS Safari 下，任何祖先含
overflow: hidden或will-change，都可能让position: fixed降级，间接影响absolute的定位锚点
红点角标在按钮右上角错位的典型修复步骤
以常见按钮右上角红点为例，必须同步处理三层：
- 给按钮本身加
position: relative（不能只加在图标或文字容器上） -
::after设position: absolute; top: -4px; right: -4px;（负值用于外撑，避免被父容器overflow: hidden裁掉） - 检查按钮父容器是否塌陷：如果按钮是
float: left的，其直接父容器必须清除浮动（用::after或display: flow-root），否则按钮实际脱离文档流，position: relative失效 - 禁用可能干扰的祖先属性：临时删掉疑似父级的
transform、filter、perspective，看红点是否回归
移动端红点偏移最易忽略的细节
iOS 上红点常向右下偏移几个像素，往往不是 CSS 错误，而是 viewport 和视口计算偏差：
立即学习“前端免费学习笔记（深入）”；
-
100vw包含滚动条宽度，导致父容器宽度计算失准，进而影响right: -4px的实际像素值 - 没写全
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">，iOS Safari 会自动缩放页面，使所有绝对定位坐标系整体漂移 - 红点使用
font-size: 0; line-height: 0;消除文字基线影响，但若父元素用了vertical-align: middle，仍可能触发行内盒模型重排
真正稳定的红点，从来不是靠反复调 top 像素值调出来的，而是先锁死定位上下文、再切断所有可能引发回流的变量。很多“看起来好了”的红点，一打开 Paint flashing 就会发现闪动区域和视觉位置不重合——那说明底层布局还没稳住。
