绝对定位元素脱离网格轨道，参考系默认为网格容器而非所在网格项；需给网格项设position: relative才能使其成为定位上下文，并注意z-index和overflow影响。
绝对定位元素脱离网格轨道，但参考系仍是网格容器
网格布局中对 position: absolute 元素的定位，不会受 grid-row/grid-column 控制——它直接脱离文档流，只认最近的「定位上下文」。默认情况下，这个上下文是网格容器（display: grid 的父元素），而不是它所在的那个网格项。
这意味着：即使你把一个 div 放在第 2 行第 3 列的网格单元里，给它加 position: absolute 后，top: 0; left: 0 会贴到整个网格容器左上角，不是该单元格左上角。
- 常见错误现象：
top: 0没对齐网格项顶部，反而飞到容器边缘 - 根本原因：网格项默认是
position: static，无法成为绝对定位的参考系 - 必须显式设置网格项为
position: relative（或absolute/fixed）才能让它“捕获”内部的绝对定位子元素
给网格项加 position: relative 是最简解法
不需要改结构、不引入额外 wrapper，只需在对应网格项（即要承载绝对定位子元素的那个 div）上加一行 CSS：
.grid-item {
position: relative;
}
之后其内部所有 position: absolute 子元素，top/left 等值就以这个网格项的 padding box 为基准了。
- 使用场景：弹窗浮层、角标 badge、图标叠加、悬停提示框等需要“钉”在某个网格单元内的元素
- 注意：如果网格项本身有
padding或border，top: 0; left: 0对齐的是 padding box 内边缘（符合 CSS 规范，但容易误以为没对齐） - 兼容性无风险：
position: relative在所有支持 Grid 的浏览器中都稳定生效
别漏掉 z-index 层级问题
加了 position: relative 后，该网格项会生成新的层叠上下文（stacking context），这会影响内部绝对定位子元素的 z-index 行为。
- 常见错误现象：绝对定位子元素被同级其他网格项遮挡，即使设了
z-index: 999 - 原因：它的父项（网格项）的
z-index默认是auto，层级可能低于相邻网格项；而子元素的z-index只在父层叠上下文中生效 - 实操建议：给网格项明确设
z-index: 1（或更高），确保它在同级中“够高”，再控制子元素的相对层级 - 性能影响：极少；但避免在大量网格项上滥用
z-index，尤其配合动画时
用 inset 替代 top/right/bottom/left 更简洁（现代写法）
如果你的目标是撑满整个网格项，用 inset: 0 比写四行更可靠，也更易读：
.overlay {
position: absolute;
inset: 0; /* 等价于 top: 0; right: 0; bottom: 0; left: 0 */
}
- 优势：避免漏写某一边、减少重复代码、语义更清晰（“贴边”而非“偏移”）
- 兼容性注意：
inset在 Chrome 89+、Firefox 63+、Safari 14.1+ 支持；旧版需回退为四属性写法 - 不推荐混用：
inset: 0和单独的top: 10px会冲突，浏览器按规范会忽略inset
真正容易被忽略的是：网格项的 overflow 值。如果设了 overflow: hidden，又忘了检查绝对定位子元素是否被裁剪——那它可能“消失”得毫无征兆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
