绝对定位元素在 Grid 容器中“飞走”是因为未设置定位上下文，需给容器设 position: relative；grid-area 等网格属性对其无效，其位置只能通过 top/left 或 inset 手动控制，且不参与 Grid 尺寸计算。
绝对定位元素在 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-area 和 grid-column 对 absolute 元素完全无效
很多人误以为给绝对定位元素写 grid-area: header 就能让它自动“塞进”命名区域，其实浏览器直接忽略该声明。它不会触发区域映射，也不会调整 inset 的参考点。
-
position: absolute元素已脱离文档流，不再参与 Grid 布局计算 -
grid-row、grid-column-start等属性对它完全不起作用 - 想让它视觉上“落在某个区域”，只能靠
top/left手动模拟，或改用inset配合容器尺寸推算
想钉在某个网格项内部？给那个 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 的尺寸协商机制——它既不撑开轨道，也不响应 1fr 分配逻辑。这意味着你不能靠 Grid 自动约束它的大小，所有尺寸和位置都得靠定位上下文 + 显式声明来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
