绝对定位子元素让Grid容器“看不见”它，因position: absolute使其脱离文档流，Grid容器计算尺寸时完全忽略它，导致高度塌陷、grid属性失效，需手动设置min-height或用JS动态计算高度。
为什么绝对定位子元素会让Grid容器“看不见”它
因为 position: absolute 让元素彻底脱离文档流，Grid 容器在计算自身尺寸、行高、列宽时直接忽略它。哪怕它视觉上还在格子里，grid-row、grid-column、place-self 全部失效，容器高度也大概率塌成 0px。
常见表现：父容器背景消失、边框不显示、下方兄弟元素上移贴顶；DevTools 里看到 height: 0，且 grid-row-start 等属性被划掉。
- 不是 Grid 有 bug，是 CSS 规范行为
-
clearfix、overflow: hidden、display: flow-root都无效——它们解决的是浮动塌陷，不是绝对定位塌陷 - 给子元素加
position: relative也没用，它只是让子元素自己变成锚点，但不帮父容器“感知”高度
怎么让Grid容器重新“感知”绝对定位子元素的高度
没有自动方案。必须手动告诉容器“你该有多高”。最稳妥的是用 JS 动态计算并设置 height 或 min-height，尤其当子元素位置/尺寸不固定时。
- 遍历所有
position: absolute子元素，取offsetTop + offsetHeight的最大值 - 别忘了加上父容器自身的
padding-top和border-top（用getComputedStyle读） - 如果存在
bottom定位的元素，需换算：用父容器当前offsetHeight减去offsetTop，再加offsetHeight - 监听
resize和DOMSubtreeModified（或用MutationObserver），但要用throttle控制频率
示例关键逻辑：
立即学习“前端免费学习笔记（深入）”；
const parent = document.querySelector('.grid-container');
const absChildren = parent.querySelectorAll(':is([style*="absolute"], [class*="abs"])');
const maxHeight = Array.from(absChildren).reduce((max, el) => {
return Math.max(max, el.offsetTop + el.offsetHeight);
}, 0);
parent.style.minHeight = `${Math.max(parent.clientHeight, maxHeight)}px`;
为什么给Grid容器加 position: relative 是必须的第一步
不加这句，top/right 等偏移值就不是相对于网格区域，而是可能飞到 body 左上角。但注意：它只解决“定位参考系”，不解决“高度塌陷”。
- 必须加在定义
display: grid的那个父容器上，不是网格项（grid item） - 加了之后，
top: 10px; right: 12px才真正从grid-area: header的右上角往里缩 - 不要同时写
grid-column: 2 / span 2和left: 20px——后者会覆盖网格线参考，span实际失效 - 若容器已设
position: absolute或fixed，不用重复加relative，但要检查外层transform或filter是否悄悄创建了新 containing block
有没有不依赖 JS 的兜底方案
有，但适用场景有限：只适用于子元素位置和尺寸完全可控、响应式变化极少的情况。
- 用
padding-bottom手动预留空间，比如padding-bottom: 48px对应一个固定高度的角标 - 用伪元素撑开：
.grid-container::before { content: ""; display: block; height: 48px; } - 把占位元素写进 HTML，设
visibility: hidden或opacity: 0，确保它参与高度计算但不可见 - 避免用
min-height硬撑——它不反映真实内容边界，容易在文字换行、字号缩放时露馅
真正难处理的是那些由 JS 动态生成、位置随数据变化的绝对定位元素。这时候，硬编码 padding 或伪元素只会引入新的错位风险。动态计算高度不是“可选优化”，而是必要步骤。
