单纯让grid-item落在同一grid-area不会自动产生深度阴影效果；真正起作用的是position+z-index控制层叠顺序，再配合box-shadow的偏移与模糊参数模拟空间距离。
单纯让 grid-item 落在同一 grid-area 里，不会自动产生有深度的阴影效果；真正起作用的是 position + z-index 控制层叠顺序，再配合 box-shadow 的偏移与模糊参数模拟空间距离。
grid-area 相同 ≠ 视觉重叠生效
两个元素都设 grid-area: "hero"，只是把它们“塞进同一个格子”，但谁在上、谁在下，取决于 DOM 顺序和是否设置了 position。没加 position: relative 就直接写 z-index: 2，这行 CSS 完全被忽略——浏览器按静态流渲染，不认 z-index。
- 必须为每个要参与重叠的网格项显式声明
position: relative -
grid-template-areas的书写顺序、区域命名本身不影响层叠，只影响布局占位 - React/Vue 中动态插入的元素，DOM 顺序不可控，更不能靠“谁写在后面”来赌层级
box-shadow 偏移值要匹配 transform: translateZ()
想让阴影看起来“浮在不同高度”，不能只调 box-shadow 的 blur，得让它和视觉深度一致。比如用 transform: translateZ(8px) 抬高一个卡片，它的阴影 y-offset 和 blur 也得同步加大，否则阴影会像“贴地滑行”而不是“悬停在空中”。
- 推荐组合：
transform: translateZ(0)→box-shadow: 0 2px 4px rgba(0,0,0,0.1) -
translateZ(8px)→box-shadow: 0 4px 12px rgba(0,0,0,0.15) -
translateZ(16px)→box-shadow: 0 8px 24px rgba(0,0,0,0.2) - 避免用
text-shadow模拟多层深度：它只作用于文字像素，无法随容器缩放，iOS Safari 下容易整条失效
父容器 overflow: hidden 会裁掉阴影
很多阴影“消失”的真实原因是父级 grid-container 默认或意外设置了 overflow: hidden（尤其在 flex 嵌套 grid 或用了 border-radius 的时候），导致阴影超出容器边界就被剪掉了——不是没渲染，是被藏了。
- 临时验证：把父容器
overflow改成visible或clip（现代浏览器支持更好） - 更稳妥方案：给容器加
padding: 8px，留出阴影落脚空间 - 别在
grid-container上同时用border-radius和overflow: hidden，这是双重裁剪陷阱 - 检查父级是否是 flex 容器且设了
align-items: stretch，它可能把 grid 容器“压扁”，间接导致阴影被挤出可视区
z-index 失效时优先查层叠上下文
写了 position: relative 和 z-index: 3 还是没用？大概率是父容器触发了新层叠上下文（stacking context），比如加了 opacity: 0.99、filter: blur(2px)、transform: scale(1) 或 will-change: transform。此时子项的 z-index 只在该容器内部比大小，跨不出去。
- 用 Chrome DevTools 的 “Computed” 面板检查
grid-container是否有上述属性 - 必须用
filter时，改用backdrop-filter替代（不触发新上下文） - 需要跨容器覆盖（如 toast 盖住侧边栏），得给整个容器设
z-index，而不是只调子项 - 多个 grid 容器并列时，
.grid-1 .item { z-index: 999 }永远压不住.grid-2 .item { z-index: 1 }，除非外层统一管控
最常被忽略的一点：重叠效果一旦加上 transform 或 position: absolute，就立刻脱离 Grid 的轨道约束，后续响应式调整会变得极其脆弱——建议优先用 grid-row/grid-column 显式定义重叠范围，再用 z-index 微调层级，而不是靠位移硬凑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
