绝对定位元素在 Grid 容器中“飞走”是因未设定位上下文：Grid 容器需显式设 position: relative 才能成为包含块，使 top/left 等以容器 padding box 为基准；若要钉在某网格项内，则该 grid-item 需设 relative；grid-area 可实现逻辑锚定，配合 inset 更语义化且适配 RTL。
绝对定位元素在 Grid 容器里“飞走”，不是 bug，是它没找到正确的定位上下文——必须手动指定参考系，否则它会一路往上找直到 body。
Grid 容器必须设 position: relative
Grid 容器默认是 position: static，而 position: absolute 的子元素只认非 static 的祖先作为包含块。不加这行，top: 0; left: 0 就会贴到视口左上角，而不是容器左上角。
- 加了之后，所有
absolute子元素的inset、top/left等值都以该容器的padding box为基准 - 如果容器本身已是
position: absolute或fixed，就不需额外加relative，但要确认其尺寸和层级稳定 -
grid-template-areas或grid-column对脱离文档流的元素无效，别指望它们能约束absolute元素
想钉在某个网格项内部？给那个 grid-item 设 position: relative
如果目标是卡片右上角的 badge、头像区域的在线状态点，就不能只靠容器设 relative——得让那个具体的网格项自己成为定位上下文。
- 只需一行：
.card { position: relative; }，不用改 HTML 结构 - 它的子元素（如
.badge）设position: absolute后，top: 8px; right: 8px就真正从该卡片的内边距起算 - 注意：
position: relative会创建新的层叠上下文，若.badge被遮挡，要检查.card自身的z-index是否足够高 -
top: 0对齐的是内边距上沿，不是 border 边缘；想贴边可用box-sizing: border-box或手动补偿
grid-area 配合 absolute 实现逻辑锚定
光靠 top/left 数值硬调，在响应式下极易偏移。grid-area 能让元素“逻辑上挂载”到命名区域，使 inset 参考点自动落到该区域边界。
立即学习“前端免费学习笔记（深入）”；
-
grid-area: header必须配合已定义的grid-template-areas: "header header"才生效 - 此时
top: 8px; right: 8px是从header区域的右上角内边距起算，不是整个容器 - 别混用：
grid-column: 2 / 4和left: 100px同时写，后者会直接覆盖前者的锚定效果 - Firefox 对 grid-line 名称解析更严格，建议显式写出线名，如
grid-column: header-start / header-end
inset 比 top/left 更语义化，但兼容性要留意
inset: 8px 等价于 top: 8px; right: 8px; bottom: 8px; left: 8px，写法更简洁，尤其适合统一控制四周偏移。
- 在 Chrome 110+、Firefox 106+、Safari 16.4+ 中表现良好
- 旧版 Chrome（≤115）对
inset支持弱，生产环境建议拆成top/right/bottom/left -
inset是逻辑属性，比方向性属性更适配 RTL 或动态网格变化 - 注意：当
inset和grid-column/grid-row同时存在时，inset优先级更高，网格线仅作初始锚点参考
最常被忽略的是层叠上下文的隐式创建——只要加了 position: relative（哪怕没写 z-index），就可能触发新 stacking context，导致相邻网格项之间的 z-index 失效。调试时先看 computed style 里的 stacking context 标记，比盲目调数值更有效。
