grid容器必须显式设position: relative，否则absolute元素因找不到已定位祖先而相对于body定位；若需锚定某网格项（如.card），则应给该项设relative并让其子元素absolute定位。
Grid容器必须显式设为position: relative
绝对定位元素不会自动以Grid容器为参考系——它只认“已定位祖先”，而display: grid本身不改变position值，默认仍是static。不加这行，top: 0; left: 0就会跳到body或上层relative容器去。
常见错误现象：.badge写在.card里，.card是网格项，但.badge飞到页面左上角；检查computed面板会发现containing block是body，不是预期的网格容器。
- 只需给定义
display: grid的那个父元素（如.grid-container）加position: relative - 如果该容器已是
absolute或fixed，无需重复加relative，但要注意外层transform或filter可能干扰containing block生成 - 别用
overflow: hidden掩盖错位——它裁剪视觉，但坐标计算照旧出错
想钉在某个网格项内部？给那个网格项设position: relative
如果目标不是整个网格区域，而是某张卡片、某个头像框、某个header区块，那就不能只靠容器设relative。得让那个具体网格项自己成为定位上下文。
典型场景：右上角角标、悬浮菜单、状态提示条。
-
.card { position: relative; }→ 创建局部定位上下文，不影响其Grid占位 -
.badge { position: absolute; top: 8px; right: 8px; }→ 偏移基于.card的padding box - 注意
z-index：若.badge被遮挡，不是z-index没生效，而是.card没设z-index，导致它没创建新层叠上下文 - 避免给多个网格项都加
relative后混用同一套top/left值——它们的padding、border、box-sizing可能不一致，偏移结果会漂移
grid-column/grid-row对position: absolute子元素只起锚点作用
这些属性在绝对定位元素上依然可写，但效果和普通流内元素完全不同：它们不分配轨道空间，只决定inset计算的初始参考线（即“从哪条网格线开始算top”），不是布局指令。
常见错误：写grid-column: 2 / span 2; left: 16px，结果元素没从第2条线开始偏移，而是从容器左边缘直接偏移——因为span在绝对定位中无意义，浏览器忽略或误解析。
- 只用明确线号或命名线，例如
grid-column: sidebar-start / sidebar-end或grid-row: 3 / 4 - 避免
auto、max-content、span等动态值；它们不参与绝对定位的尺寸计算 -
grid-area命名区域对position: absolute完全无效，声明了也白写 - 调试时临时加
outline: 1px solid red到Grid容器，比猜线号更可靠
用inset替代top/left更语义化，但兼容性要兜底
inset: 8px等价于top: 8px; right: 8px; bottom: 8px; left: 8px，尤其适合统一控制四边偏移的响应式场景。但它在旧版Chrome（≤115）、Safari 15.6之前不支持。
写死像素值在Grid中风险高：单元格宽度随fr或内容变化，left: 16px可能超出边界；百分比又依赖父高是否明确。
- 优先用
inset+margin: auto居中（需配width/height） - 兼容性要求高时，降级为四边单独写：
top: 8px; right: 8px; bottom: 8px; left: 8px - 不要混合使用：
inset和top同时存在时，inset会覆盖top，造成调试困惑 - 若父项有
padding，top: 0贴的是内边距上沿；真要贴border边缘，要么改box-sizing，要么手动减去padding-top
top、inset、z-index都在往错误的方向调。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
