子元素覆盖父元素右上角必须用 position: relative + position: absolute；仅 float 或 margin 无效，因不脱离文档流；.parent 必须设 relative 建立定位上下文，.child 设 absolute 并用 top/right 偏移，否则位置漂移。
子元素覆盖父元素右上角必须用 position: absolute + position: relative
仅靠 float: right 或 margin-left: auto 无法让子元素“覆盖”到父元素右上角区域，因为它们不脱离文档流，也不能突破父容器的内边距或边框边界。真正生效的方式是建立定位上下文：.parent 设 position: relative，.child 设 position: absolute，再用 top 和 right 偏移。
常见错误包括：
-
.parent没设position: relative→.child会向上找最近的已定位祖先，甚至落到上，导致位置漂移 -
.child忘了加position: absolute→ 所有top/right都无效 - 误用
position: fixed→ 定位基准变成视口，完全脱离父容器
right: 0 和 top: 0 不一定等于“视觉右上角”
如果父元素自身有 margin（比如 margin: 30px），那 right: 0 实际会让子元素贴在父容器内容区右边界，而不是整个盒子的右边缘。此时需手动补偿：
- 若父容器
margin-right: 30px，子元素想对齐外侧，则写right: 30px - 若父容器有
border或padding，且希望子元素盖住边框（如通知角标），直接right: -5px+top: -5px微调即可 - 要精确覆盖右上角像素点（比如遮掉
border-bottom），常配合transform: translate(100%, -100%)反向微调
层叠顺序必须显式控制 z-index
绝对定位元素默认层叠等级高于普通流内元素，但父子间仍遵循“子元素天然在父元素内容层之上”的规则——也就是说，即使父元素设了 z-index: 1，其子元素仍会显示在它上面，不会被它遮盖。所以：
- 若需子元素压住父元素的边框/背景，
z-index通常不用设（默认已满足） - 若父容器内还有其他兄弟元素（如另一个
div），而你想确保子元素始终最上层，才需给.child设z-index: 2或更高 - 避免给父元素设
z-index后又期望它盖住自己的子元素——这违背渲染规则，不可能实现
伪元素方案更适合动态角标
如果只是做「未读数」「新」这类小角标，推荐用 ::after 伪元素而非真实子元素，好处是语义干净、无需额外 HTML、支持 data- 属性驱动内容：
.badge {
position: relative;
}
.badge::after {
content: attr(data-count);
position: absolute;
top: -8px;
right: -8px;
background: #f00;
color: #fff;
font-size: 12px;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
注意：伪元素继承父元素的 position: relative 上下文，top/right 是相对于父元素内容区计算的，和真实子元素行为一致；但它的 z-index 默认就在父元素内容层之上，几乎不用额外干预。
真正容易被忽略的是：所有偏移值（top、right、transform）都依赖父元素是否设置了 position: relative ——漏掉这一行，整个定位链就断了，而且错误往往不报错、只表现错位，排查起来特别慢。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
