grid-item 的 z-index 不生效是因为默认 position: static，需设 position: relative 才激活；父容器的 transform、opacity 等会创建层叠上下文限制子项层级；gap 与大阴影冲突，可用 margin 替代；overflow: hidden 会裁剪阴影，需留 padding 或改用 overflow: clip。
grid-item 的 z-index 不生效，因为没设 position: relative
阴影被盖住，往往不是 z-index 数值不够大，而是它根本没起作用。Grid 项默认是 position: static，此时写 z-index: 999 和不写一样——浏览器直接忽略。
- 必须显式加
position: relative才能激活z-index，哪怕不需要偏移 - 错误写法：
class="shadow-lg z-10"→z-10被无视 - 正确写法：
class="relative z-10 shadow-lg" - 如果用了
place-self或align-self，再加position: absolute可能导致对齐失效，优先用relative
grid-container 触发了隐式层叠上下文，锁死子项 z-index
父容器只要带了 transform、opacity（哪怕 opacity: 0.99）、filter 或 will-change，就会悄悄创建新层叠上下文。所有子项的 z-index 都被关进这个“房间”，再高也出不去。
- 用 Chrome DevTools 的 Layers 面板确认：右键元素 → “Reveal in Layers”，看是否嵌套在 stacking context 里
- 临时删掉父级的
transform: scale(1)或filter: blur(0)，观察阴影是否立刻出现 - 若必须保留这些效果，把需要前置的卡片移到
grid-container外，用position: fixed+ JS 同步位置（慎用）
gap 是透明间隙，大阴影会“挤进” gap 区域打架
gap 不占渲染空间，而 box-shadow 是画在元素边框外的像素。当阴影扩散半径较大（比如 box-shadow: 0 4px 12px），它会侵入 gap 区域，和相邻卡片的阴影重叠、抵消，造成“被切开”的错觉。
- 避免组合使用大模糊阴影 +
gap；小阴影（blur-radius ≤ 6px）更安全 - 真要大阴影，改用
margin替代gap：关掉gap: 0，让卡片自己控制间距 - 加
margin后，记得给容器补padding抵消溢出，或用minmax(calc(280px + 32px), 1fr)动态调整列宽
overflow: hidden 直接裁剪阴影，不是样式没生效
Grid 容器设了 overflow: hidden（包括默认值未显式声明时某些场景触发），会强制裁掉超出 padding box 的所有绘制内容——阴影属于“绘制边界”，哪怕 box-shadow 属性存在，视觉上就是断一截。
- 临时改成
overflow: visible测试是否恢复；若不能改，用padding: 8px给阴影留出落脚地 - 现代方案可用
overflow: clip（Chrome/Edge 支持好，Safari 有限） - 别在容器上同时设
border-radius和overflow: hidden，双重裁剪风险更高 - 伪元素模拟阴影（
::before+filter: blur()）可绕过此限制，但增加 DOM 和维护成本
blur-radius，可能同时触发裁剪、重排、层级错乱——得一块儿看，不能只盯 box-shadow 这一行。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
