grid容器不计算绝对定位元素的高度，因其完全脱离文档流，既不参与行高计算也不撑开列宽；若所有子元素均为absolute，容器可能坍缩为0高度，需用min-height或grid原生定位替代。

Grid容器不计算绝对定位元素的高度

因为 position: absolute 元素完全脱离文档流，Grid 容器对其尺寸“视而不见”——它既不参与行高计算，也不撑开列宽，更不会触发 grid-template-rows 重排。你看到的网格轨道高度，只由其他非绝对定位的子元素（或显式设置的 min-height/height）决定。

• 即使你在绝对定位元素里放了一张大图或长文本，.grid-container 的 grid-row: 1 高度也不会因此变高
• 如果所有直系子元素都是 position: absolute，整个 Grid 容器可能坍缩成高度为 0（除非你手动设了 min-height 或内容撑开）
• 用 getComputedStyle(el).height 查绝对定位元素自身高度是有效的，但这对 Grid 轨道无影响

想让Grid“感知”绝对定位内容的高度？别用absolute

这不是 bug，而是 CSS 规范行为。如果你需要元素既精准定位又参与高度计算，就得放弃 position: absolute，改用 Grid 原生能力：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 用 place-self: end end + margin 模拟右下角定位，同时保留流内尺寸贡献
• 给目标元素设 align-self: flex-end / justify-self: end，配合 display: grid 或 display: flex 内部布局
• 若必须叠加（如角标），把角标放在同级、非绝对定位的容器里，再用 z-index 控制层叠

常见误操作：给grid item加relative后反而塌陷

很多人给网格项（比如 .card）加 position: relative，再在里面放 position: absolute 子元素，结果 .card 自身高度归零或错乱。这是因为：

• position: relative 不改变元素在 Grid 中的占位逻辑，但一旦其内部有 absolute 子元素，该子元素就不再撑开 .card 的高度
• 如果 .card 没设 min-height 或没内容撑开，它会退化为仅含 padding 的空盒，top: 0; left: 0 的角标就贴在左上角却看不见
• 多个 grid-item 同时设 position: relative，容易因外层 transform/filter 创建新 containing block，导致定位基准意外切换

真正要检查的：containing block 是否正确

绝对定位元素的位置偏差，90% 源于 containing block 错误。Grid 容器默认是 position: static，根本不算定位上下文。浏览器会一路往上找，最终落到 body 或视口上。

• 必须给定义 display: grid 的那个父元素（如 .layout）加 position: relative
• 如果该容器已是 position: absolute 或 fixed，就不需额外加 relative，但要注意外层是否用了 transform —— 它会创建新 containing block，且可能干扰 scroll-bound behavior
• grid-area 名称本身不构成定位上下文，也不能被 CSS 选择器直接匹配（比如不能写 div[grid-area="header"]）

Grid 的高度控制和绝对定位是互斥的设计选择；强行混合时，问题从来不在“怎么调位置”，而在于“谁该负责尺寸”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！