绝对定位元素在 grid 容器中“飞走”是因为未设定位上下文，需为容器或目标网格项添加 position: relative 以创建 containing block；inset 更语义化但兼容性有限；grid-area 对其无效。
绝对定位元素在 Grid 容器里“飞走”，不是代码写错了，是它根本没找到正确的定位上下文——必须手动指定参考系，否则它会一路往上找直到 body。
Grid 容器必须设 position: relative
Grid 容器默认是 position: static，而 position: absolute 只认非 static 的祖先作为包含块（containing block）。不加这行，top: 0; left: 0 就会贴到视口左上角，而不是网格容器左上角。
-
.grid-container { display: grid; position: relative; }是最简、最通用的解法 - 加完后，所有直接子级的
inset、top/left都以该容器的 padding box 为基准 - 如果容器本身已是
position: absolute或fixed，就不需要额外加relative，但要注意外层transform或filter可能干扰 containing block 行为 - 别指望
grid-template-areas或grid-column能约束它——这些对脱离文档流的元素完全无效
想钉在某个网格项内部？给那个 grid-item 设 position: relative
如果目标不是整个容器，而是某张卡片、某个头像区域，就得让那个具体网格项自己成为定位上下文。常见于角标（.badge）、关闭按钮（.close）等局部叠加元素。
- 给目标网格项（如
.card）加position: relative，无需改 HTML 结构 - 它的子元素（如
.badge）设position: absolute，再用top: 8px; right: 8px微调 - 注意：
position: relative会让该网格项创建新的层叠上下文；若.badge被遮挡，要检查.card的z-index是否足够高 -
top: 0对齐的是.card的内边距上沿，不是 border 边缘；需贴边时可用box-sizing: border-box或手动减去 padding
inset 比 top/right 更语义化，但兼容性有限
inset 是 top、right、bottom、left 的缩写，语义更清晰（比如 inset: 0 0 auto auto 表示“贴左上角”），但它在 Safari 15.4 之前不支持，旧版 Edge 也不支持。
- 现代项目可放心用：
inset: 12px 16px auto auto比top: 12px; right: 16px更易读 - 需兼容老浏览器时，优先用传统四值写法
-
inset的参考点和top/left完全一致，都是父级的 padding box，不因 Grid 布局而改变
grid-area 对 position: absolute 元素无效
很多人误以为给绝对定位元素写 grid-area: header 就能让它自动“塞进”命名区域，其实浏览器直接忽略该声明。它不会触发区域映射，也不会调整 inset 的参考点。
-
grid-area只对参与 Grid 布局的元素生效（即position: static或relative的网格子项） - 绝对定位元素已脱离 Grid 轨道，它的位置只由最近的已定位祖先 +
top/inset决定 - 若真想逻辑上绑定区域，得靠 JS 计算该区域边界，或用
position: relative的网格项包裹它——而不是依赖 CSS 声明
最容易被忽略的点：Grid 容器加了 position: relative 后，还要确认它有明确尺寸（比如 height 或内容撑开），否则 top: 0; bottom: 0 可能失效；另外，若容器设了 overflow: hidden，超出部分会被裁剪，但坐标计算仍照常进行——这点在调试时经常让人困惑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
