如何在 CSS 中堆叠元素

如果您想在网络上创建奇妙而独特的视觉体验，最终需要将两个元素重叠或出现在同一个位置。 您甚至可能只需要将它们定位在彼此附近或旁边。 让我们介绍两种不同的方法来实现这一点，一种使用 position 属性，另一种使用 CSS Grid。

方法 1：使用 position 属性

您可能已经知道 position: absolute; 会将元素绝对放置在页面上的任何位置。 在这种情况下，我们将子元素绝对定位到页面的左上角。 无论父元素在哪里，子元素都将被放置在该角，绝对地。

.child {
  ...
  position: absolute;
  top: 0;
  left: 0;
}

查看 CodePen 上的示例
CSS 堆叠，绝对定位 1，由 Sarah Drasner (@sdras)
在 CodePen 上。

但这非常脆弱！ 如果您要将某些内容放置在页面上，然后其他内容随后出现怎么办？ 也许您在导航中有一个始终想要在左上角的图标，但第三方进来放置了一个横幅广告。（我不是在提倡横幅广告，但它们确实存在。） 这会将导航向下推，现在图标就乱了套。

或者，假设您想创建一个可以在多个地方使用的自包含组件。 您需要它可重用并且可以在自己的上下文中工作，无论您在哪里使用它。

如果我们在父元素上添加 position: relative;，那么它内部任何具有 position: absolute; 的元素都将被绝对放置，相对于该包含单位！

.child {
  /* ... */
  position: absolute;
  top: 0;
  left: 0;
}

.parent {
  position: relative;
}

查看 CodePen 上的示例
CSS 堆叠，绝对定位 2，由 Sarah Drasner (@sdras)
在 CodePen 上。

很好。

如果我们想将两个元素叠放在彼此之上，我们可以使用相同的原理。 在这里，我们将有两个子元素叠放在彼此之上，并用 150 像素隔开。 我们将看到它们现在被包含在同一个父元素中，并保持在该父元素内部。

.child {
  position: absolute;
  top: 0;
}

.child-1 {
  left: 0;
}

.child-2 {
  left: 150px;
}

.parent {
  position: relative;
}

查看 CodePen 上的示例
CSS 堆叠，绝对定位 3，由 Sarah Drasner (@sdras)
在 CodePen 上。

这有点老派，但我已经使用它很多年了，而且我仍然会用到它。 它在所有浏览器中都能一致地工作，可以帮助您实现最奇怪和独特的定位。

方法 2：使用 CSS Grid

另一种重叠元素、堆叠元素或修改其位置的好方法是 CSS Grid，这取决于您需要支持的兼容性程度（您可以 使用 Caniuse 检查）。

我们可以像这样将元素放置在容器中的需要的位置

.parent {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 1fr;
}

.child {
  grid-area: 1 / 1 / 2 / 2;
}

查看 CodePen 上的示例
CSS 堆叠，Grid 1，由 Sarah Drasner (@sdras)
在 CodePen 上。

如果一个元素应该叠放在另一个元素上，我们可以将它们放在同一个网格区域中。 我们还可以使用边距稍微偏移它们。

.parent {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 1fr;
}

.child {
  grid-area: 1 / 1 / 2 / 2;
}

.child-2 {
  margin-left: 200px;
}

查看 CodePen 上的示例
CSS 堆叠，Grid 2，由 Sarah Drasner (@sdras)
在 CodePen 上。

如果您发现这种技术难以可视化，我创建了一个 CSS Grid 生成器，希望能帮助您更清晰地理解。

---

有太多地方可以使用这些技术！ 您可以堆叠、分层和偏移元素。 您可以创建导航、页脚。 您几乎可以创建任何类型的布局，您希望对元素在页面上的放置方式进行更精细的控制。