最常见原因是grid容器默认position: static，不构成定位上下文，absolute元素只能向上查找最近已定位祖先，常锚定到body左上角；须给display: grid的容器显式设position: relative。
Grid容器没设position: relative
绝对定位元素在 Grid 中“不听使唤”，最常见原因是 display: grid 的父容器仍是默认的 position: static。CSS 规范规定，position: absolute 只会向上查找最近的「已定位祖先」（即 position 值为 relative、absolute、fixed 或 sticky），而 static 完全不参与定位上下文判定。
结果就是：你写了 top: 10px; right: 12px;，但它实际锚定在 左上角，甚至被裁剪到视口外。
- 用开发者工具选中该元素 → 切到 “Computed” 面板 → 查看
offsetParent，它大概率显示为body或html - 临时给 Grid 容器加
outline: 1px solid red，能立刻看出它是否渲染出真实尺寸（若高度为 0，说明内部全是脱离流的元素） - 修复只需一行：
position: relative加在定义display: grid的那个元素上
子元素同时用了grid-column和top/left
Grid 属性和绝对定位是互斥的。grid-column、grid-row、grid-area 对 position: absolute 元素完全无效——它们不会被分配到任何轨道，也不会影响容器尺寸计算。
如果你既写了 grid-column: 2 / 4，又写了 left: 20px，后者会直接覆盖前者的语义，但网格线参考点已丢失，left 实际是从容器 content box 左上角起算，不是从第 2 列开始。
- 视觉上想“贴在第二列右上角”？别靠
grid-column+top混搭，而是用position: relative容器 +inset或百分比微调 - 需要响应式对齐？优先用
justify-self: end; align-self: start;+transform: translate(8px, -8px)，它不脱离流，且随网格单元缩放 - 调试时看 Styles 面板：如果
grid-column-start被划掉（strikethrough），说明它已彻底失效
父级或中间层有transform干扰
哪怕 Grid 容器加了 position: relative，只要它或任意祖先设置了 transform（包括 translateZ(0)、scale(1)），就会强制创建新的包含块（containing block）。此时 top/left 不再以你写的 relative 父元素为基准，而是以那个带 transform 的元素为原点——而它的坐标系可能已被偏移、缩放或旋转。
- 逐层检查所有祖先的 Computed
transform值，必须是none才安全 - 某些 UI 库、动画组件、CSS-in-JS 工具会悄悄注入
transform: translateZ(0)触发 GPU 加速，非常隐蔽 - 临时注释掉 transform 相关样式，看定位是否立刻恢复正常——这是最直接的验证方式
- 避免在同一个容器上同时写
position: relative和transform，除非你明确知道新 containing block 的行为
Grid容器高度塌陷导致top百分比失效
position: absolute 元素脱离文档流后，Grid 容器会忽略它来计算自身高度。如果容器内只有这类元素，height 很可能变成 0px。这时 top: 50% 就等于 top: 0px，因为百分比是相对于容器 height 计算的。
- 给 Grid 容器加
min-height: 1px或显式height，哪怕只是占位，也能让百分比计算有据可依 - 更可靠的做法是用
inset替代单边偏移：inset: 10px auto auto 10px明确指定四边，不依赖容器尺寸 - 若需拉伸填满某区域，用
top: 0; bottom: 0; left: 0; right: 0;比width: 100%; height: 100%更稳定
position: relative，而是它被 transform 静默覆盖，或者容器本身已经塌成一条线——这时候 top: 50% 看似语法正确，实则毫无意义。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
