position: absolute 是唯一能让子元素“不占空间”且保留 DOM 位置和可访问性的方式；需在目标网格项（而非 Grid 容器）上设 position: relative 以实现局部定位，配合 inset 或 top/left 定位，并注意父项塌陷问题。
直接用 position: absolute，但必须配合 position: relative 在父容器（或目标网格项）上，否则它会飞到 body 左上角。
为什么 position: absolute 是唯一有效方式
Grid 中让子元素“不占空间”本质是让它退出布局流。只有 display: none 和 position: absolute 能做到这点，但二者行为完全不同：
-
display: none会从网格项列表中彻底移除该元素，Grid 自动重排剩余项——你失去对它的视觉控制 -
position: absolute保留 DOM 位置和可访问性（如alt文本、焦点顺序），仅移除其尺寸参与计算，适合需要“悬浮”“覆盖”“装饰”等场景 -
visibility: hidden或opacity: 0都不满足“不占空间”——它们仍占据轨道、影响grid-auto-flow、返回真实getBoundingClientRect()
必须加 position: relative 的地方不是 Grid 容器本身
很多人在 .grid-container 上加 position: relative，结果所有 absolute 子项都以整个容器为基准定位，完全失去局部锚定能力。正确做法是：
- 想让按钮悬浮在
.card右上角 → 给.card加position: relative - 想让图标贴在
.avatar左下角 → 给.avatar加position: relative - 想让提示框相对于某网格单元格定位 → 就给那个
grid-item加，而不是整个 grid 容器
加完后，top: 0; left: 0 才真正对齐该单元格的 padding box 起点。
立即学习“前端免费学习笔记（深入）”；
inset 比 top/left 更稳，但要注意兼容性
写 top: 8px; right: 12px 看似简单，但响应式下易错位；inset: 8px 12px auto auto 语义更清晰，且参考点一致（都是父级 padding box）。不过：
- Safari 15.4 之前不支持
inset - 旧版 Edge 完全不识别
- 若需兼容 iOS Safari 或企业内网环境，优先降级为传统四值写法
-
inset: 0; margin: auto;是居中绝对定位最可控的方式，比transform: translate(-50%, -50%)更少意外
真正容易被忽略的是：加了 position: absolute 后，父网格项高度大概率塌陷——它不再“感知”这个子元素的存在。如果该元素原本是撑高父项的唯一内容，就得手动设 min-height 或用 JS 动态计算最大偏移量，否则布局会断层。
