必须给目标网格项加 position: relative，否则绝对定位子元素会以 body 为包含块而“飞走”；Grid 容器默认 static，不提供定位上下文；.card 等网格项需设 relative 才能使 badge 等子元素相对其定位。
必须给 Grid 容器或目标网格项加 position: relative，否则 position: absolute 子元素会以 body 为包含块，“飞走”到视口左上角。
Grid 容器没设 relative，绝对定位子元素就找不到参考系
Grid 容器默认是 position: static，而 position: absolute 只认非 static 的祖先作为定位上下文。没这行，top: 0; left: 0 就不是贴网格左上角，而是贴整个页面左上角。
- 检查开发者工具里容器的
position计算值，确认是不是static - 如果容器本身已是
position: absolute或fixed，不用额外加relative，但得留意它是否被外层遮挡 -
grid-template-areas或grid-column对绝对定位元素完全无效——它已脱离网格流
想让 badge/tooltip 钉在某个网格单元内部，就得给那个 grid item 加 relative
比如卡片右上角放一个 .badge，只给 Grid 容器加 relative 不够，它会相对于整个容器定位；必须给 .card（即那个网格项）加 position: relative，才能让它成为定位上下文。
-
.card { position: relative; }这一行就够了，不用改 HTML 结构 - 加了之后，
.badge { position: absolute; top: 8px; right: 8px; }就从.card的 padding box 起算 - 注意：
.card会因此创建新的层叠上下文，若.badge被遮住，要检查.card自身的z-index - 如果
.card用了display: contents，它无法承载定位上下文，必须额外包一层div
用 inset 替代 top/left 更适配动态网格，但别忽略兼容性
inset: 8px 等价于 top: 8px; right: 8px; bottom: 8px; left: 8px，语义更清晰，也更容易配合 transform 做响应式微调，尤其当网格轨道用 fr 或 minmax() 动态变化时。
立即学习“前端免费学习笔记（深入）”；
- Chrome 110+、Firefox 106+、Safari 16.4+ 支持良好；旧版 Chrome（如 87–109）可能忽略
inset，需回退到四值写法 - 别混用：
grid-area: header和left: 100px同时写，后者会直接覆盖前者的逻辑锚定效果 - Firefox 对
grid-line名称解析更严格，建议显式写grid-column: header-start / header-end
最常被漏掉的其实是那行 position: relative —— 它不改变布局，也不影响尺寸计算，但少了它，所有 top/left/inset 都失去意义。
