z-index在grid容器中不起作用是因为它只对定位元素生效，而grid子项默认为static定位；必须显式设置position（如relative）才能激活z-index。
z-index 在 grid 容器里为什么不起作用？
因为 z-index 只对「定位元素」生效，而 grid 子项默认是 static 定位 —— 即使它在视觉上被 grid 布局推到了某处，z-index 依然被忽略。
必须显式设置 position（哪怕只是 position: relative）才能激活 z-index。
- 错误写法：
.card { z-index: 2; }（无 position，无效） - 正确写法：
.card { position: relative; z-index: 2; } - 注意：不要用
position: absolute脱离 grid 流，除非你真想手动控制坐标
grid-template-areas + z-index 混用时的层级陷阱
当用 grid-template-areas 布局卡片，并希望某张卡片“浮在上面”，容易误以为区域顺序决定层叠顺序 —— 实际上完全无关。层叠只由 z-index + 定位上下文决定。
常见错误现象：header 区域定义在 grid-template-areas 最后一行，但视觉上却被中间卡片遮挡，不是因为“写得晚”，而是因为没设 z-index 或父容器形成了新的层叠上下文。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否设置了
opacity、transform、filter等属性 —— 这些会创建新层叠上下文，把子项的z-index锁死在内部 - 若需跨区域叠加（比如悬浮卡片盖住相邻区域），确保所有参与叠加的项都在同一层叠上下文中（即父容器不要意外触发新上下文）
- 示例安全写法：
.grid-container { display: grid; grid-template-areas: "a b" "c d"; } .card-a { grid-area: a; position: relative; z-index: 1; } .card-d { grid-area: d; position: relative; z-index: 3; } /* 盖住 a 和 c */
多卡片重叠时 z-index 数值怎么设才不乱？
别用零散数字（比如 2、7、13），容易后期冲突。用「阶梯式基数」+「语义分段」更可控。
- 基础层（背景/不可交互）：
z-index: 0 - 内容层（正常卡片）：
z-index: 100 - 悬停高亮层：
z-index: 200 - 模态/弹出层：
z-index: 300 - 关键点：只要每类之间留够 50–100 的余量，后续加中间状态（如过渡动画中的临时层级）就不会撞车
- 避免全局
z-index: 9999—— 它会让调试和协作变成噩梦
Firefox 下 grid 重叠卡片闪烁或错位
这是老版本 Firefox（z-index + transform 同时存在时的渲染 bug，尤其当卡片用了 scale() 或 translateZ()。
表现是：鼠标移入瞬间卡片跳一下，或层叠顺序随机翻转。
- 临时修复：给卡片加
will-change: transform;（仅在需要动画时加，别滥用） - 更稳方案：改用
opacity+z-index控制显示/隐藏，避开 transform 触发的合成层切换 - 兼容性提醒：Chrome/Safari 对这类组合处理更宽容，但别因此忽略 Firefox 用户
层叠感不是靠堆 z-index 数字实现的，而是靠明确定义「谁该有定位」「谁该管层级」「谁不该意外截断上下文」——这三个判断错了任意一个，视觉就不可控。
