给Grid容器加position: relative是前提，否则absolute角标会定位到body左上角；应优先用grid-area绑定命名区域并配合inset定位，避免top/right与网格定位混用导致冲突。
给Grid容器加position: relative是前提
不加这行，position: absolute的角标会一路往上找定位上下文，大概率钉在body左上角——这不是bug，是规范行为。Grid容器默认position: static，它不构成包含块（containing block）。必须显式写position: relative，才能让子元素的top/right/inset以该容器为基准。
注意：如果容器本身已是position: absolute或fixed，可跳过这步，但要确认其父级没意外截断层级。
用grid-area挂载角标到命名区域更稳
直接写top: 12px; right: 12px在响应式下容易偏移，尤其网格线随屏幕缩放移动时。改用grid-area把角标“逻辑绑定”到某块区域，它的inset值就自动参考该区域边界。
-
grid-template-areas: "header header" "main main"必须先定义，grid-area: header才生效 -
inset: 8px auto auto 0此时是从header区域的内边距起算，不是整个容器 - Firefox对线名解析更严格，建议显式写
grid-column: header-start / header-end，别依赖隐式推导
别混用grid-column和left/right
grid-column: 2 / 4和left: 100px同时存在时，后者会覆盖前者的布局锚点，角标实际脱离网格线控制。
真正想微调位置，优先用inset（Chrome 110+、Firefox 106+、Safari 16.4+支持）：inset: 4px 4px auto auto比top: 4px; right: 4px语义更清晰，且天然适配direction和writing-mode变化。
若需兼容旧浏览器，仍可用top/right，但务必删掉所有grid-column/grid-row等网格定位声明，避免冲突。
局部锚定要给网格项设relative
当角标只应钉在某个卡片右上角（比如.card），而不是整个Grid容器范围，就得让那个网格项自己成为定位上下文。
只需一行：.card { position: relative; }，不用改HTML结构。.badge { position: absolute; top: 8px; right: 8px; }就会相对于.card的padding box定位。
注意两点：
– .card设position: relative会创建新层叠上下文，若角标被遮挡，先检查它的z-index是否足够；
– 若.card有padding，top: 0对齐的是内边距上沿，不是border边缘；想贴边可用box-sizing: border-box或手动补偿。
最易忽略的其实是溢出裁剪问题：哪怕定位全对，只要父级有overflow: hidden或overflow-x: scroll，角标照样消失。这时候得换思路——用Grid区域替代绝对定位，彻底绕开containment边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
