CSS制作徽章小红点，absolute定位负偏移教程

负 margin 依赖固定像素值，而 translate() 基于自身宽高，缩放、rem 切换、甚至 scale() 动画下都能保持对齐。

• 右上角红点推荐写法：top: 0; right: 0; transform: translate(50%, -50%); —— 把红点中心精准锚定在父容器右上角
• 若红点是 8px × 8px 圆形，translate(50%, -50%) 相当于向右移 4px、向上移 4px，视觉上“挂”在角上
• 不要混用：top: -4px; right: -4px; transform: translate(0, 0) 是冗余且脆弱的写法
• 配合 border-radius: 50% 和 width: 8px; height: 8px 才能确保是正圆，不是椭圆

z-index 不够高时红点会被遮住

很多情况下红点渲染出来了，但看不见——不是没显示，是被兄弟元素盖住了。尤其是导航栏有 overflow: hidden、卡片有阴影层、或按钮带 z-index 时。

• z-index: 10 是底线，但实战中常见需设为 99 或 999
• 检查父容器是否设置了 overflow: hidden：它会裁剪子元素，包括 absolute 元素，即使 z-index 再高也白搭
• 如果父容器用了 transform（比如 scale(0.95)），它会创建新的层叠上下文，此时红点的 z-index 只在该上下文内生效，必须同步提升父容器层级

今天关于《CSS制作徽章小红点，absolute定位负偏移教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！