小红点需相对于购物车图标精确定位，必须给其父容器设 position: relative，小红点自身用 position: absolute + top/right 微调，并通过 line-height 和 text-align 居中数字，同时确保 z-index 足够高且容器尺寸明确。
购物车图标右上角的悬浮小红点，用 position: absolute 定位时，**默认会以最近的 position: relative 祖先为参考系**；如果没设，就退到 body，而 body 默认有 margin 且没定位，结果小红点总偏左上、不贴图标右上角。
小红点必须相对于购物车图标定位
不能让它“飘”在页面任意位置，得死死钉在图标右上角。常见错误是直接给小红点加 top: 0; right: 0; 却忘了父容器（即购物车图标容器）没设 position: relative。
- 购物车图标外层容器（比如一个
<div class="cart-icon">）必须加position: relative - 小红点本身设
position: absolute，再用top: -6px; right: -6px;微调（数值根据图标大小和设计稿定） - 避免用
transform: translate()做微调——它会触发重绘，小动画频繁时可能卡顿
小红点内容居中靠 line-height + text-align，不是 margin: auto
小红点通常是带数字的圆形元素（<span class="badge">3</span>），宽高固定。想让里面的数字垂直+水平居中，别碰 margin: 0 auto 或 justify-content——它不是 Flex 项目，也不吃这套。
- 设固定宽高：
width: 18px; height: 18px; - 用
line-height: 18px;让单行数字垂直居中 - 用
text-align: center;让数字水平居中 - 字体大小别太大（如
font-size: 12px;），否则会撑出圆角或溢出
IE11 及以下要避开 flex 和 place-items
老项目还在兼容 IE11？那小红点绝对不能依赖 Flex 布局居中。IE11 对 display: flex 的子项对齐支持不全，align-items 在某些嵌套下会失效，而且 place-items: center 根本不识别。
立即学习“前端免费学习笔记（深入）”；
- 坚持用
position: absolute+top/right+line-height组合，兼容性最稳 - 别给小红点设
display: flex，IE11 里justify-content可能被忽略 - 如果小红点需要响应式缩放（比如高清屏），优先用
em或rem单位配line-height，别用像素硬写
真正容易被忽略的是：小红点的 z-index 必须高于购物车图标本身，否则会被遮住；另外，当购物车图标是 SVG 或背景图时，确保其容器有明确的尺寸——否则 right: -6px 会算错基准。
