因为grid容器默认position: static，不构成定位上下文，absolute元素只能向上寻找最近已定位祖先，若无则锚定视口左上角；解决方法是给grid容器显式设position: relative。
为什么绝对定位子元素总“飞”到页面左上角？
因为 position: absolute 只认最近的「已定位祖先」，而 Grid 容器默认是 position: static，不构成定位上下文。浏览器会跳过它，一直往上找到 body 或其他 relative/fixed 祖先——这正是偏移失效的根源。
用开发者工具选中该子元素，在「Computed」面板里看 offsetParent 值，一眼就能确认它到底锚在哪。如果显示的是 body，那基本可以确定问题出在 Grid 容器没加 position: relative。
- 别指望
grid-template-areas或grid-column能自动提供定位参考——它们对脱离文档流的元素完全无效 - 容器若已是
position: absolute或fixed，不用额外加relative，但得检查外层是否有transform或filter悄悄创建了新 containing block - 全局重置如
* { position: static !important; }会静默覆盖你的声明，务必在 Computed 面板确认position值是relative且未被划掉
该给 Grid 容器还是网格项加 position: relative？
取决于你想让子元素相对谁定位。
想让所有 absolute 子元素都以整个网格区域为基准（比如贴 grid-area: header 右上角），就给定义 display: grid 的那个父容器加 position: relative —— 一行代码就够了，top: 8px; right: 8px 就真从 header 区域右上角往里缩。
但如果目标是某个卡片右上角的 .badge，只给容器加 relative 不够：它会让 .badge 相对于整个容器定位，而不是卡片本身。这时必须给 .card（即那个网格项）加 position: relative，再让 .badge 用 top: 8px; right: 8px 微调。
- 给网格项加
position: relative后，它自身会脱离 Grid 的尺寸控制逻辑，可能导致高度塌陷或对齐错乱 - 若
.card用了display: contents，它无法承载定位上下文，必须额外包一层<div> <li> <code>position: relative会让网格项创建新的层叠上下文，若.badge被遮住，要检查.card的z-index - 居中？用
place-self: center或justify-self: center; align-self: start - 右上角角标？用
grid-column: -1; grid-row: 1; justify-self: end; align-self: start - 覆盖层？用
grid-area: 1 / 1 / -1 / -1占满，再设z-index - 必须用绝对定位时，
inset比top/right更适配动态网格（inset: 8px等价于四边各缩进 8px），但注意 Chrome 87–109 等旧版可能忽略它，需回退到四值写法 - 看 Styles 面板里
grid-row-start、grid-column-end等属性是否被划掉（strikethrough）——如果被划掉，说明这些属性已失效，它确实脱离了 Grid 布局流 - 看 Layout 面板（Firefox）或 Elements 面板的网格高亮，确认它是否还在你期望的网格区域内
- 检查 Computed 样式中的
position值是否为absolute，以及offsetParent是否符合预期 - 临时加
outline: 1px solid #000到 Grid 容器，配合 DevTools Grid 面板勾选 “Show line numbers”，肉眼验证线号和实际位置是否匹配
如何避免 top/left 在响应式下偏移失效？
写死像素值（如 top: 24px; left: 16px）在 Grid 中极易失准，因为网格单元格尺寸是动态的（fr、minmax()、内容撑开等）。单元格变窄时，left: 16px 可能已经超出边界。
更稳的做法是优先用 Grid 自身能力替代绝对定位：
调试时怎么快速确认元素是否真的“脱离了 Grid”？
打开浏览器开发者工具，选中该元素：
最常被漏掉的其实是那行 position: relative——它不改变布局，也不报错，但缺了它，后面所有 top/right/inset 都只是在猜坐标。
