给网格项设 position: absolute 会使其脱离 Grid 布局，grid-column 等属性失效，定位基准变为 body；正确做法是给其直接父容器设 position: relative，再对菜单用 absolute 定位。
给网格项加 position: absolute 会让菜单“消失”或错位
直接给网格项（比如 .menu）设 position: absolute，它就彻底脱离 Grid 流——grid-column、grid-row、grid-area 全部失效，浏览器不再为它分配轨道空间，也不会按你写的区域定位。常见现象是菜单突然飞到视口左上角，或叠在完全无关的位置。
这不是 CSS Grid 的 bug，而是规范行为：position: absolute 元素的包含块（containing block）只认最近的已定位祖先（position: relative/absolute/fixed/sticky），而默认的 Grid 容器没有定位属性，所以它会一路往上找到 <body>。
- 检查开发者工具里该元素的 computed
position和containing block，大概率显示为body - 别指望
grid-area: menu能约束它——这个声明只对正常流内的子元素生效 - 如果菜单 DOM 是
.header > .menu这种嵌套结构，那它根本不是 Grid 容器的直接子元素，所有grid-*属性都无效
想让悬浮菜单贴着网格单元格出现，必须设父容器为 position: relative
真正起作用的不是给菜单本身加 position: absolute，而是给它的**直接父容器**（即那个网格项，比如 .header 或 .card）加 position: relative。这样菜单才能以这个网格项为定位基准，而不是整个页面。
-
.header { position: relative; }—— 创建定位上下文，不改变 Grid 占位，也不影响行高 -
.menu { position: absolute; top: 100%; left: 0; width: 100%; }—— 紧贴父项底部展开 - 确保
.header的grid-row高度固定（如60px），否则auto或1fr会让它随内容伸缩，导致菜单锚点漂移 - 如果菜单内容可能超长，加
max-height: 200px; overflow-y: auto;，避免无限制拉高
inset 比 top/left 更适配动态网格，但兼容性要留意
用 inset: 0 0 auto 0 替代 top: 100%; left: 0; 可以更清晰表达“从父项底部开始向下延伸”，语义更强，且对响应式网格中列宽变化更鲁棒。但它在 Safari 15.4 之前、Firefox 63 之前不支持。
立即学习“前端免费学习笔记（深入）”；
- 现代写法：
.menu { position: absolute; inset: 100% 0 auto 0; }（等价于top: 100%） - 兼容写法：保留
top: 100%; left: 0; right: 0;，再加inset覆盖 -
inset不会自动继承父项尺寸，仍需配合width: 100%或left/right: 0控制宽度
菜单展开时别让下方内容“被顶下去”
即使用了 position: absolute，如果父容器（如 .header）高度没锁死，hover 后内部内容撑开它，Grid 的 grid-template-rows 就会重算——下面的 .content 行就会下滑，造成视觉“抖动”。这不是绝对定位的问题，而是父容器没隔离布局影响。
- 给
.header设固定高度（如height: 60px）或最小高度（min-height: 60px） - 菜单用
position: absolute+z-index浮在上方，确保不参与父容器高度计算 - 避免仅靠
display: none/block切换，改用opacity+transform+pointer-events实现更平滑的显隐过渡 - 若菜单需横跨整行，别依赖
grid-column: 1 / -1（它对绝对定位子元素无效），改用width: 100%; left: 0;
z-index、定位上下文——这些细节看着琐碎，但漏掉任意一个，菜单就可能飘走、遮不住、或者把整个网格推变形。实际调试时，优先打开开发者工具，盯着 computed 样式里的 position 和 containing block 看，比猜更可靠。 
