必须给grid容器设position: relative，否则absolute子元素会以body为包含块而“飞走”；若需局部锚定则给对应网格项设relative，再用inset或top/left精确定位。
绝对定位元素在 Grid 容器里“飞走”不是 bug，是它没找到正确的定位上下文——必须手动指定参考系，否则它会一路往上找直到 body。
给 Grid 容器加 position: relative
这是最常见也最容易漏掉的一步。Grid 容器默认是 position: static，而 position: absolute 的子元素只认非 static 的祖先作为包含块（containing block）。
- 不加这行，
top: 0; left: 0会贴到视口左上角，而不是网格容器左上角 - 加了之后，所有
absolute子元素的inset、top/left等值都以该容器的 padding box 为基准 - 如果容器本身已有
position: absolute或fixed，就不需要额外加relative，但要注意层级嵌套是否合理
用 grid-area 锚定再绝对定位
光靠 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
给网格项（grid item）设 position: relative
当你要把一个 badge、tooltip 或浮层“钉”在某个具体网格单元内部（比如卡片右上角），而不是整个容器范围，就得让那个网格项自己成为定位上下文。
- 只需一行：
.card { position: relative; }，不用改 HTML 结构 - 之后
.badge { position: absolute; top: 8px; right: 8px; }就会相对于.card的 padding box 定位 - 注意：这个操作会让
.card创建新的层叠上下文，如果.badge被遮挡，要检查.card自身的z-index是否足够高 - 如果
.card有padding，top: 0对齐的是内边距上沿，不是 border 边缘；想贴边可用box-sizing: border-box或手动补偿
inset 比 top/left 更可靠
inset 是逻辑属性，语义清晰且更适配动态网格，但兼容性需留意。
-
inset: 8px等价于top: 8px; right: 8px; bottom: 8px; left: 8px，写法更简洁 - 在支持的浏览器中（Chrome 110+、Firefox 106+、Safari 16.4+），它能更好配合
transform做响应式微调 - 旧版 Chrome（inset 可能被忽略，生产环境建议 fallback 写法：
top: 8px; right: 8px; bottom: 8px; left: 8px -
inset和grid-column共存时，inset优先级更高，网格线仅提供初始锚点，后续偏移全由inset控制
真正麻烦的不是写法，而是忘记定位上下文必须显式创建——display: grid 本身不等于 position: relative，这两个是正交概念，混用时谁都没法替对方兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
