如果一直是跟着 CSS Grid 布局这个系列到这里，你应该还记得，在 CSS Grid 布局中，我们可以通过网格项目放置的方式，让不同的元素重叠在一起，并且通过 CSS 的 z-index 来控制网格项目在 z 轴上的层叠顺序。也就是说，以往需要使用 CSS 的 position 的绝对定位（absolute）来实现的布局，现在可以直接使用 CSS Grid 来解决。在这一节，我们主要来看如何使用 CSS Grid 实现元素叠加的布局效果。

CSS中的层叠

正如上图所示，在 Web 中类似于上图这种元素叠加在一起的布局很常见。他们有着相同的共性：元素一层一层叠加在一起，有完全叠加，也有部分叠加：

在 CSS 的世界中，他们都是 z 轴的叠加，而且控制他们的层级需要依赖于 z-index 来控制：

而且 z 轴的层级叠又是一个复杂的体系：

即使抛开技术体系，在众多 Web 开发者世界中，甚至包括很多 CSSer，都认为要触发 z-index 生效，必须是 position 为非 static。事实上，文档中的层叠上下文由满足以下任意一个条件的元素形成：

• 根元素 (HTML)
• z-index 值不为 auto 的 绝对/相对定位
• position 值为非 static
• 一个 z-index 值不为 auto 的 Flex 项目 或 Grid 项目
• opacity 属性值小于 1 的元素
• transform 属性值不为 none 的元素
• mix-blend-mode 属性值不为 normal 的元素
• filter、perspective、clip-path、mask、motion-path 值不为 none 的元素
• isolation 属性被设置为 isolate 的元素
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
• -webkit-overflow-scrolling 属性被设置 touch 的元素

正如列表中第三条所说：

一个 z-index 值不为 auto 的 Flex 项目 或 Grid 项目!

言外之意，我们经常使用 position: absolute 来实现元素叠加的布局效果。有了 CSS Grid 之后，就不再需要这样做了。至少在 网格项目上不再需要显示设置position 值为非static。

先从简单地卡片叠加开始

我们先从最简单，最常见的示例开始，那就是卡片叠加，也就是《处理图片上文字效果的几种姿势》文中所介绍的 UI 效果：