应将 grid 容器设为 position: relative，使其成为绝对定位元素的包含块；否则 absolute 元素默认寻找最近相对/绝对/固定定位祖先，而 grid 容器默认 static 不参与定位上下文。
位置不对，不是元素写错了，是它根本没按你想的“地方”去定位——position: absolute 默认不认 Grid 的行、列、区域，只找最近那个 position: relative（或 absolute/fixed）的祖先。Grid 容器本身默认是 position: static，压根不算数。
为什么 grid-item 加 position: relative 不解决问题
很多人试过给网格项（比如 .card）加 position: relative，再在里面放一个 position: absolute 的角标，结果发现角标确实相对 .card 定位了……但 .card 自己却在网格里“飘”了，或者高度塌陷、对齐错乱。
-
grid-item加position: relative后，它自己变成定位上下文，但它的定位基准仍是 Grid 容器——而它已脱离 Grid 的尺寸控制逻辑 - 一旦子元素用
position: absolute，.card就不再参与网格行高计算，可能变矮甚至高度为 0 - 如果
.card没设显式宽高，又没内容撑开，那它的padding box实际就是个点，top: 0; left: 0会贴到左上角但看不见 - 更隐蔽的问题：多个
grid-item都加了position: relative，但它们的定位行为彼此干扰，尤其配合grid-template-areas时，容易误判哪个才是“真正该管事”的父级
真正该设 position: relative 的是 Grid 容器本身
想让所有 position: absolute 子元素都以整个网格区域为参考系（比如贴 grid-area: header 右上角），就必须让 Grid 容器自己成为定位上下文。
- 给定义
display: grid的那个父元素（如.layout）加上position: relative，一行代码就够了 - 这样，所有直接子元素的
top/left都从这个容器的padding box左上角起算，和grid-column、grid-row是否设置无关 - 若容器已有
position: absolute或fixed，就不需要额外加relative；但要注意它是否被外层 transform 或 filter 干扰了 containing block 行为 - 避免同时给容器设
overflow: hidden又让子元素absolute超出——超出部分会被裁剪，但坐标计算仍正常
top/left 写死像素值为什么总偏移
写 top: 24px; left: 16px 看似简单，但在 Grid 布局中极易失效，因为 Grid 单元格尺寸是动态的（响应式、内容撑开、fr 单位等）。
-
top/left是绝对像素偏移，不随网格单元缩放；单元格变窄时，left: 16px可能已经超出边界 - 想右对齐某个
grid-area？别用right: 8px，先确保容器有position: relative，再配合inset或transform - 居中一个绝对定位元素？
top: 50%; left: 50%; transform: translate(-50%, -50%);比margin: auto更可控，且兼容性更好 - 旧版 Chrome 对
inset: 8px支持弱，建议拆成top: 8px; right: 8px; bottom: 8px; left: 8px
调试时最该看的三个地方
别猜，直接看浏览器开发者工具里这几个关键信息：
- 选中绝对定位元素，在 Styles 面板里确认
position确实是absolute，且grid-row-start、grid-column-end这些属性被划掉（strikethrough）——说明它已彻底脱离 Grid 流 - 在 Computed 面板里查
Containing Block，它显示的是哪个元素？如果不是你预期的 Grid 容器，就说明position: relative没加对地方 - 临时给 Grid 容器加
outline: 1px solid #f00和background: rgba(0,0,0,0.05)，确认它真实存在、有尺寸、包裹正确范围
最常被忽略的点：Grid 容器设了 position: relative 后，它自身仍完全受 Grid 控制（grid-template-rows、place-items 等照常生效），只是顺便成了定位参照物——这行 CSS 不破坏任何布局逻辑，但它必须存在，否则所有绝对定位都只是在碰运气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
