父容器设为 grid 时，子元素若设 position: absolute 会脱离 Grid 流而相对于最近已定位祖先定位；应给 Grid 父容器加 position: relative 以提供定位上下文，优先使用 Grid 自身对齐能力替代绝对定位。
父容器设为 grid 时，子元素若再设 position: absolute，会脱离 Grid 流，导致定位异常——它不再受 grid-area、justify-self 等控制，而是相对于最近的 position: relative/absolute/fixed/sticky 祖先定位。常见误操作是：父容器用了 display: grid，却没处理好子元素的定位上下文。
确保绝对定位子元素有明确的定位参考
Grid 容器默认不是定位上下文（即不触发 position: relative 的效果）。若子元素用 position: absolute，又没其他已定位祖先，就会回退到初始包含块（通常是视口），造成“飞出”或错位。
- 最直接解法：给 Grid 父容器同时加
position: relative - 避免混用：不要在同一个子元素上既用
grid-column / grid-row，又用top/left等绝对定位——二者逻辑冲突 - 如需精细偏移，优先用
justify-self、align-self或transform，而非position: absolute
嵌套 Grid 中子元素定位失效的典型场景
比如外层是 Grid，内部某个 grid item 又是子 Grid 容器，而你在它的子项里用了 position: absolute——这时定位参考是那个内层 Grid 容器，但若它没设 position: relative，就会继续往上找，可能跨层级错位。
- 检查每一级 Grid 容器是否需要成为定位上下文：只需对“要承载绝对定位子项”的那一层加
position: relative - 用浏览器开发者工具查看 computed position 的 Containing Block，确认是否符合预期
- 嵌套深时，建议用 class 显式标记可定位容器，例如
.grid-relative { position: relative; }
替代方案：用 Grid 自身能力替代绝对定位
多数情况下，Grid 的对齐、间距、区域划分能力已足够替代手工绝对定位，更稳定、响应性更好。
立即学习“前端免费学习笔记（深入）”；
- 居中一个子元素？用
place-self: center或justify-self: center; align-self: center - 右上角角标？用
grid-column: -1; grid-row: 1;配合justify-self: end; align-self: start - 覆盖层（overlay）？用
grid-area: 1 / 1 / -1 / -1占满整个网格区域，再设z-index
不复杂但容易忽略：Grid 和定位不是互斥的，关键在明确“谁是定位上下文”。加一行 position: relative 往往就解决问题，但前提是知道它为什么需要存在。
