绝对定位元素不响应grid-column等属性，因其脱离文档流后浏览器直接忽略所有Grid布局声明，且Grid容器默认position: static，无法作为定位上下文，导致top/left基准常错位至body或html。
因为 position: absolute 元素完全脱离文档流，浏览器会忽略所有 Grid 布局属性（包括 grid-column、grid-row、grid-area），它不再锚定到任何网格线，而是向上查找最近的已定位祖先作为 containing block。
绝对定位元素为何不响应 grid-column / grid-row
Grid 线号（如 grid-column: 2 / 4）只对参与 Grid 布局计算的常规子项生效。一旦加了 position: absolute，该元素就退出布局流，grid-column 在 DevTools 的 Styles 面板中会显示为划掉状态，Computed 值变成 auto。它和网格轨道彻底“失联”，不是语法写错，是规范行为。
- 即使 HTML 结构上是 Grid 容器的直接子元素，也无济于事
-
grid-template-areas对它完全无效，命名区域形同注释 - gap 不产生线号，别误把 gap 边界当网格线来对齐
为什么 top/left 参照的不是网格容器左上角
根本原因是 Grid 容器默认 position: static，不构成定位上下文（containing block）。position: absolute 元素会跳过它，继续往上找 —— 很可能落到 body 或 html 上，导致 top: 0; left: 0 贴在视口左上角，而非你预期的单元格角落。
- 用 Chrome DevTools 的 Computed 面板查该元素的
offsetParent，能一眼确认实际参考系是谁 - 临时加
outline: 1px solid red到 Grid 容器，再对比子元素视觉位置与 outline 的偏差，直观暴露错位 - 如果 Grid 容器本身已是
position: absolute或fixed，那它天然就是 containing block，无需额外加relative
inset 和 grid-line 同时写会发生什么
它们不是叠加关系，而是覆盖关系：inset（或 top/right 等）优先级永远高于 grid-column/grid-row。一旦写了 left: 20px，元素就从整个容器左边缘开始偏移，不再以第 2 条网格线为起点。
- 想靠网格线精确定点（比如第三列起始线 + 第二行结束线），就别混用
left/top，纯用线号语法：grid-column: 3; grid-row: 2 / 3; - 若需微调偏移，用
inset+transform组合，例如inset: 8px; transform: translateX(-4px); - 注意旧版 Chrome 对
inset支持差，可降级为四边单独写：top: 8px; right: 8px; bottom: 8px; left: 8px;
真正难的不是写代码，而是判断锚点层级
嵌套 Grid 中，定位参考可能跨多层：外层容器没设 position: relative，内层某个 .card 却被加了 position: absolute，结果它锚定到了更外层甚至 body。这时仅靠改一个 class 无法解决，必须逐层检查每一级 Grid 容器是否需要成为定位上下文 —— 只有“要承载绝对定位子项”的那一层才需要加 position: relative。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
