z-index在Grid中失效主因是父容器创建了层叠上下文或子项未设position；须确保grid-container无opacity
Grid项阴影重叠时z-index不生效？先确认父容器不是stacking context源头
直接给 grid-item 设 z-index 却没效果，大概率是因为它的父容器（grid-container）触发了新的层叠上下文（stacking context），比如设置了 opacity: 0.99、transform: translateZ(0)、will-change: transform，或带 filter。此时子元素的 z-index 只在该局部上下文中起作用，无法和兄弟项真正“比高低”。
解决办法是：确保 grid-container 没有意外创建 stacking context；若必须用 filter 或 opacity，改用 backdrop-filter 或透明背景替代。
- 检查浏览器开发者工具的“Computed”面板，看
grid-container是否有transform、opacity 、filter等属性 - 临时移除这些属性，验证
z-index是否恢复预期行为 - 如需模糊背景但不想创建上下文，用
backdrop-filter: blur(4px)替代filter: blur(4px)
阴影重叠靠的是position + z-index组合，纯box-shadow不决定层级
box-shadow 本身是绘制效果，不影响元素在文档流中的堆叠顺序。要让一个网格项的阴影“盖住”另一个项的内容，必须让该项在视觉层级上更高——也就是通过 position: relative（或 absolute）配合 z-index 提升其层叠级别。
常见错误是只加 box-shadow，却不设 position，导致 z-index 被忽略（CSS规范规定：z-index 对 static 定位元素无效）。
- 每个需要参与层级控制的
grid-item必须声明position: relative -
z-index值只需相对大小有意义，比如1、2、3，不必追求极大数字 - 避免对所有项统一设
z-index: 999，这会让后续动态调整失去意义
Grid布局中z-index的生效范围仅限于同一grid container内
同一个 grid-container 下的子项可以自由用 z-index 排序，但不同容器之间的 z-index 不可跨容器比较。例如两个并列的 .grid-1 和 .grid-2，即使前者子项 z-index: 100，后者子项 z-index: 1，也不能保证前者一定盖过后者——最终谁在上，取决于它们在 DOM 中的顺序，或各自容器的 z-index。
如果需要跨容器控制阴影遮盖关系，必须把它们放进同一个 grid-container，或在外层再包一层定位容器并统一管理 z-index。
- 不要指望
.grid-1 > .item { z-index: 10 }能压住.grid-2 > .item { z-index: 1 } - 多个网格区域需统一遮盖逻辑时，优先考虑合并为单个
display: grid容器 - 若结构不允许合并，外层加
position: relative并为每个网格容器单独设z-index
阴影看起来“漂浮”但边缘发虚？注意box-shadow的spread和blur匹配
当多个 grid-item 层叠且都带阴影时，如果 box-shadow 的 blur-radius 过大而 spread-radius 为 0，阴影会显得“扩散开、没根基”，尤其在高对比背景下更明显。这不是层级问题，而是视觉欺骗。
真实场景中，有厚度的悬浮感来自 shadow 的 spread 扩展 + 适度 blur，同时配合 item 自身的轻微 translateY 上移（模拟抬升），才能让重叠阴影自然可信。
- 推荐组合：
box-shadow: 0 8px 16px -4px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) - 避免单层大 blur：
box-shadow: 0 0 30px rgba(0,0,0,0.3)容易糊成一团，难辨层次 - 可配合
transform: translateY(-2px)强化“浮起”错觉，但别过度，否则网格对齐会偏移
实际中最容易被忽略的是：z-index 生效的前提是元素已脱离默认文档流定位，而 Grid 项默认是 static —— 所以哪怕你写了 z-index: 99，只要没配 position，它就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
