根本原因是position: absolute使元素彻底脱离文档流，浏览器忽略grid-row等所有grid属性，转而向上查找最近的非static定位祖先作为containing block；若grid容器未设position: relative（默认static），基准将跳至body或html。
绝对定位元素的定位基准不是Grid容器，而是最近的已定位祖先
根本原因不是Grid“失效”，而是position: absolute彻底脱离文档流后，浏览器会忽略所有Grid相关属性（grid-row、grid-column、grid-area），转而向上查找第一个position值为relative、absolute、fixed或sticky的祖先。如果Grid容器本身是position: static（默认值），它就不会被选中——基准可能落到body甚至html上。
常见现象：top: 0; left: 0没贴在网格左上角，反而卡在视口左上角；响应式切换时位置乱跳；开发者工具里看到offsetParent指向了意外的外层元素。
- 用Chrome DevTools的“Computed”面板检查子元素的
offsetParent，一眼就能确认实际参考系是谁 - 临时给Grid容器加
outline: 1px solid red，再对比子元素边框与outline的位置偏差，能直观暴露“布局盒 vs 视觉盒”错位 - 别指望
grid-template-areas或place-self能约束它——这些对脱离流的元素完全无效
Grid容器必须显式设position: relative
这是最简、最通用的解法。只加这一行，就能让top/left真正以Grid容器的padding box为基准。不加的话，top: 10px永远不是“离网格单元上边10px”，而是“离body上边10px”。
注意：如果Grid容器本身已是position: absolute或fixed，就不需要额外加relative；但要警惕外层transform或filter可能干扰containing block行为——它们会创建新的定位上下文，导致基准再次漂移。
- 必须加在定义
display: grid的那个父容器上，不是网格项（grid item） - 加完后，
inset: 0 0 auto auto和top: 0; right: 0;效果一致，但inset语义更清晰 - 若需钉在某个具体网格项（如
.card）内部，就给那个网格项设position: relative，而非整个Grid容器
父元素有transform时，定位基准会变成旋转/缩放后的内容区左上角
只要父元素transform值不为none（包括rotate(10deg)、translateZ(0)、scale(0.95)），它就创建新的包含块，子元素的top/left就不再基于原始布局框，而是基于**变形后的内容区左上角**计算。
典型表现：top: 0; left: 0没贴住父容器视觉左上角；居中逻辑top: 50%; left: 50%; transform: translate(-50%, -50%)完全错位。这不是bug，是CSS规范行为。
-
transform-origin控制的是变形中心点，不是定位原点，改它无法修复偏移 - 框架/组件库常悄悄加
transform: translateZ(0)触发GPU加速——这也足以触发该问题 - 调试时可临时移除父元素的
transform，确认是否为根源
为什么inset比top/left更稳，但兼容性要注意
inset是top、right、bottom、left的缩写，语义更清晰（比如inset: 0 0 auto auto表示“贴左上角”），且它的参考点和top/left完全一致——都是父级的padding box，不因Grid布局而改变。但它在Safari 15.4之前不支持，旧版Edge也不支持。
现代项目可放心用：inset: 12px 16px auto auto比top: 12px; right: 16px更易读；需兼容老浏览器时，优先用传统四值写法。
-
inset不能解决父容器transform导致的基准漂移，它只是语法糖 - 它仍依赖父容器是已定位祖先，所以
position: relative这一步不能省 - 别用
inset模拟全屏遮罩——它需要父容器提供布局空间，无法真正“压全屏”
transform: scale(1.01)，或框架注入的will-change: transform，都可能让top: 0突然失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
