绝对定位红点跑出容器外，因未设position:relative的父容器导致其相对body定位；应为直接父容器设position:relative，并用top:0;right:0;transform:translate(50%,-50%)精准锚定右上角。
绝对定位红点为什么总跑出容器外？
因为 position: absolute 脱离文档流后，会相对于**最近的已定位祖先元素**（即 position 为 relative、absolute 或 fixed 的父级）进行定位。如果父容器没设 position: relative，红点就会一路向上找，最终可能相对 body 定位，飘到页面右上角去。
实操建议：
- 确保红点的直接父容器（比如按钮、头像、图标外层
div）设置了position: relative - 不要只靠
top/right值硬调，先确认父容器是否“接得住”绝对定位子元素 - 用浏览器开发者工具检查红点的 computed
position和offsetParent，看它到底相对于谁在定位
右上角偏移怎么写才不依赖父容器尺寸？
用 top: 0 + right: 0 只能贴边，要向内偏移（比如右上角往里缩 4px），必须配合负值或 transform。直接写 top: -4px; right: -4px 看似简单，但会导致红点中心点偏移，视觉上不对称；更稳妥的是固定红点自身尺寸后，用 transform 微调。
实操建议：
- 给红点设固定宽高，比如
width: 8px; height: 8px; - 用
top: 0; right: 0; transform: translate(50%, -50%);把红点右上角锚点移到父容器右上角，再向右下各移自身一半尺寸——这样无论父容器大小如何变化，偏移量都稳定 - 若需精确偏移 4px（如右上角内缩），改用
transform: translate(calc(100% + 4px), -4px);，但注意兼容性：IE 不支持 calc 在 transform 里，稳妥起见仍推荐第一种
小红点层级被盖住怎么办？
红点常被父容器的 overflow: hidden 截断，或被兄弟元素的 z-index 压在下面。这不是定位失效，而是渲染层问题。
实操建议：
- 检查父容器是否有
overflow: hidden，有就删掉，或改成overflow: visible（除非业务真需要裁剪） - 给红点加
z-index: 1，同时确保其父容器（那个position: relative的）没有更低的z-index把它拖下水 - 避免在红点上用
opacity: 0.9或filter，它们会触发新层叠上下文，可能让z-index失效
红点要响应式适配不同屏幕怎么办？
小红点在手机上太小看不见，在大屏上又显得突兀，纯 px 值不够灵活。但用 rem 或 em 又容易受字体继承影响失准。
实操建议：
- 用
vw单位控制大小，比如width: 2.5vw; height: 2.5vw;，在主流设备上表现较均衡（注意最小值限制） - 结合媒体查询做断点控制：
@media (max-width: 480px) { .badge { width: 6px; height: 6px; } } - 别对红点本身做
scale动画——它会放大整个元素盒模型，影响transform偏移基准，优先用width/height配合border-radius: 50%
最易被忽略的是：红点容器的 position: relative 必须作用在**视觉上包裹目标元素的那个节点**，而不是 DOM 结构里更外层的布局容器。多一层 wrapper 就多一分错位风险，动手前先用 devtools 框选确认“谁是 offsetParent”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
