给网格项加 position: relative 是解决绝对定位子元素不按网格单元定位的最简方案，使其成为定位上下文，且不需修改HTML结构。
在 CSS Grid 布局中，给子元素加 position: absolute 后发现它没按预期卡在所在网格单元里？不是 bug，是默认行为——它压根不认网格项（grid-item）为参考系，而是直接找最近的已定位祖先，通常是网格容器（display: grid 的父元素）甚至 body。
为什么 grid-item 默认不能当 absolute 的“爹”
网格项默认是 position: static，而 CSS 规范明确：只有 position 值为 relative、absolute、fixed 或 sticky 的祖先，才能成为绝对定位元素的“定位上下文”。static 不算数，加了也白加。
常见错误现象：top: 0; left: 0 的元素飞到整个网格容器左上角，而不是它所在的那个 .grid-item 左上角。
- 检查 computed style 中该网格项的
position值，大概率是static - 用开发者工具高亮该网格项，确认它是否真有宽高和位置（有时因塌陷或未设尺寸而“不可见”）
- 别指望
grid-row/grid-column能约束absolute元素——它已脱离网格轨道
给 grid-item 加 position: relative 是最简解法
只需一行 CSS，就能让这个网格项变成其内部 absolute 子元素的定位基准：
.grid-item {
position: relative;
}
之后，子元素的 top、left 等值就从该网格项的 padding box 左上角开始计算，不是容器整体，也不是视口。
- 不需要额外 wrapper 元素，不改 HTML 结构
- 如果网格项本身有
padding，top: 0会贴着内边距上沿；想贴 border 内侧，要么调box-sizing: border-box，要么手动补偿（不推荐） - 若网格项是
grid-area: header这类命名区域，同样适用——只要对应的那个元素加了position: relative
父级加 relative 后高度塌陷怎么办
加了 position: relative 本身不会导致塌陷，但一旦子元素变成 absolute，它就彻底脱离文档流。父容器计算高度时“看不见”它，只剩其他非绝对定位子元素撑起的高度。
典型表现：背景色/边框只包住文字，盖不住右上角 badge；offsetHeight 返回 0。
- 手动设
height或min-height（适合尺寸固定的场景，如固定高 40px 的徽章） - 用
padding-bottom模拟占位（例如子元素高 40px，父加padding-bottom: 40px） - 更现代的做法：放弃纯
absolute，改用display: grid+place-items: end end或justify-self: end; align-self: end实现右下角定位
容易被忽略的 z-index 和 overflow 影响
position: relative 本身会创建新的层叠上下文（stacking context），如果同时设了 z-index（哪怕只是 z-index: 0），就可能遮挡同级其他网格项的内容。
另外，若网格项设了 overflow: hidden，而 absolute 子元素超出其边界，就会被裁剪——这常被误认为“定位失效”，其实是溢出控制在起作用。
调试时，临时去掉 overflow 和 z-index，再逐个加回，能快速定位是否是它们在干扰视觉呈现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
