grid子元素盖住其他项需同时满足定位上下文和层叠顺序：父容器设position: relative，子元素设position: absolute/relative并配z-index；absolute定位错乱因缺少已定位祖先，务必加position: relative。
grid布局里子元素怎么盖住别的grid项
靠 z-index 不够，必须同时满足定位上下文和层叠顺序两个条件。纯 display: grid 的子项默认在同一个层叠上下文中，z-index 对它们无效。
- 父容器得是
position: relative（或其它非static值），给子元素提供定位锚点 - 要盖上去的子元素必须设
position: absolute或position: relative，否则z-index不生效 - 被盖住的其他网格项如果也加了
position和z-index，就得比对具体数值——不是“有”就行，是“更大”才行
为什么absolute定位后位置乱飞了
因为 position: absolute 的定位参考系变成了最近的「已定位祖先」，而网格容器本身如果不设 position，就不是已定位祖先，于是它会往上找，可能落到 body 上，导致坐标错乱。
- 务必给网格容器加
position: relative，这是最常见漏掉的一步 - 用
top/left定位时，数值单位建议用px或rem，避免依赖网格线计算出错 - 如果想沿用网格轨道位置（比如盖在第2行第3列上），可以用
inset配合grid-area估算，但更稳的方式是用transform: translate()微调
grid-template-areas 能不能配合 z-index 一起用
能，但不直接。命名区域本身不影响层叠，它只管位置分配；z-index 还是得靠定位+显式设置。
-
grid-area只决定这个元素放在哪块格子里，不影响它在Z轴上的层级 - 即使两个元素都用了
grid-area: "header"，重叠部分谁在上，仍由它们各自的position和z-index决定 - 注意：如果父容器用了
grid-template-areas，又对某个子元素设了position: absolute，它就脱离了网格布局流，不再受grid-area约束——这点容易误以为“还在那个区域里”
Firefox里z-index偶尔失效怎么办
Firefox 对层叠上下文的创建更严格，尤其当父容器有 transform、opacity < 1 或 will-change 时，会隐式创建新层叠上下文，把 z-index 作用域锁死在内部。
立即学习“前端免费学习笔记（深入）”；
- 检查网格容器或其任意祖先是否带
transform（哪怕只是transform: translateZ(0)） - 避免在父级上设
opacity: 0.99这类“几乎不透明”的值，它也会触发新层叠上下文 - 临时调试可用
about:config搜layout.css.individual-transform.enabled关闭（仅限本地验证，不可上线）
position: relative，或者某层祖先悄悄建了个层叠上下文。 
