根本原因是position: absolute只认最近的非static祖先，而grid容器默认position: static，不构成定位上下文；解决方法是给grid容器显式设置position: relative。
绝对定位元素在 Grid 布局中“参照物乱飘”，根本原因不是 Grid 本身有问题，而是 position: absolute 的定位逻辑压根不认网格线、grid-area 或 grid-row —— 它只找最近那个 position 值为 relative、absolute、fixed 或 sticky 的祖先。Grid 容器默认是 position: static，它不算数。
为什么 grid 容器默认不是定位上下文
Grid 布局靠 display: grid 触发，但这个声明**不改变**元素的 position 计算值。浏览器查 offsetParent 时，会跳过所有 static 祖先。所以即使你写了 grid-template-areas: "header main"，只要容器没加 position: relative，.badge 就可能飞到 body 左上角。
- 用开发者工具选中绝对定位元素 → 查看 Computed 面板里的
offsetParent，一眼就能看到它到底锚在哪 -
grid-area: header对position: absolute元素完全无效——它只是布局声明，不创建定位上下文 - 哪怕父元素是网格项（
div直接子项），只要它自己是static，就无法当“爹”
为什么给 grid-item 加 position: relative 反而更糟
给网格项（比如 .card）加 position: relative，确实能让它的子元素（如角标）相对它定位，但代价是：.card 自身脱离了 Grid 的尺寸控制逻辑。
-
.card一旦设了position: relative，内部再放position: absolute子元素，该子元素就不再参与行高计算 →.card高度可能塌成 0 - 多个
.card都加了relative，它们的定位行为彼此独立，但 Grid 容器却仍按原始轨道分配空间 → 视觉错位、对齐失效 - 你本想让角标贴在卡片右上，结果卡片自己在网格里“飘”了，或被其他项挤变形
怎么让 top/left 真正相对于 grid-area 边界
唯一可靠路径：把定位上下文建在 Grid 容器上，而不是网格项里。这样所有 absolute 子元素的 top、left 才是从整个网格区域左上角起算，再配合 grid-area 或网格线“挂载”到目标格子。
- 给定义
display: grid的那个父元素（如.layout）加position: relative，一行代码就够了 - 子元素写
grid-area: header+top: 8px; right: 8px，此时right: 8px真的是 header 区域右边往里缩 8px - 避免混用：
grid-column: 2 / span 2和left: 20px同时存在时，left会覆盖网格线参考点，span实际失效 - 如果容器已有
position: absolute或fixed，不用额外加relative，但要小心外层transform或filter是否悄悄创建了新 containing block
为什么写死像素值在 Grid 里特别容易偏移
top: 16px; left: 24px 看似简单，但在 Grid 中是“静态坐标陷阱”：它不随 fr、minmax() 或内容撑开而缩放。单元格变窄时，left: 24px 可能直接超出边界；响应式断点切换后，位置就全乱了。
- 用
inset替代单边偏移（如inset: 8px auto auto 8px）语义更清晰，但注意旧版 Chrome 兼容性 - 需要居中？别只靠
top: 50%; left: 50%，必须加transform: translate(-50%, -50%)，否则基准点仍是左上角 - 真正安全的响应式方案其实是避开
absolute：用place-self: center+transform: translateY(-12px)，它仍参与网格流，缩放时自动适配
最常被忽略的一点：就算你给 Grid 容器加了 position: relative，如果它外层有 overflow: scroll 且也设了 position: relative，那绝对定位元素就会跟着滚动——因为它的 offsetParent 变成了那个滚动容器。这时候得把 relative 上移到更高层级，比如 body，或者换用 position: fixed。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
