如何在CSS中堆叠元素

如果您想在网络上创建出色且独特的视觉体验，最终将需要两个元素重叠或存在于同一位置。您甚至可能只需要将它们放置在附近或彼此之间。让我们探讨两种不同的方法来实现这一目标，一种是具有位置属性，另一种具有CSS网格。

方法1：使用位置属性

您可能已经知道这个立场：绝对；无论您想要的位置，都将绝对放在页面上。在这种情况下，我们绝对将孩子定位到页面的左上。无论父母在哪里，孩子都将被绝对放在那个角落。

 。孩子 {
  ...
  位置：绝对；
  顶部：0;
  左：0;
} 

看到笔
CSS堆叠，莎拉·德拉斯纳（Sarah Drasner）的绝对1（@sdras）
在Codepen上。

但这很脆！如果您要在页面上放置某些东西，然后再出现其他事情，该怎么办？也许您在左上角一直想要的导航中有一个图标，但是第三方进来并放入横幅广告。 （我不是在提倡横幅广告，但确实存在。）这将导航推向下来，现在图标不合适。

或者，假设您想制作一个可以在多个地方使用的独立组件。无论您在何处使用它，您都需要重复使用并在其自身上下文中工作。

如果我们放置位置：相对；在父元素上，其内部的任何位置：绝对；将绝对放置，相对于包含单元！

 。孩子 {
  / * ... */
  位置：绝对；
  顶部：0;
  左：0;
}

.parent {
  位置：相对；
} 

看到笔
CSS堆叠，Sarah Drasner的绝对2（@sdras）
在Codepen上。

好的。

如果我们想将两个元素彼此堆叠在一起，我们可以使用相同的前提。在这里，我们将在彼此之间堆叠两个子元素，并以150个像素分开。我们将看到它们现在包含在同一父母中，并保持在其中。

父母

儿童1

孩子2

 。孩子 {
  位置：绝对；
  顶部：0;
}

.Child-1 {
  左：0;
}

.Child-2 {
  左：150px;
}

.parent {
  位置：相对；
} 

看到笔
CSS堆叠，Sarah Drasner的绝对3（@sdras）
在Codepen上。

这是一个小校园，但是我已经使用了多年了，但我仍然掌握它。它跨浏览器始终如一地工作，甚至可以帮助您实现最奇怪和最独特的位置。

方法2：使用CSS网格

重叠元素，堆叠它们或修改其位置的另一种好方法是CSS网格，具体取决于您需要支持的距离（您可以与Caniuse进行检查）。

我们可以将一些需要的东西放在这样的容器中：

 .parent {
  显示：网格；
  网格板柱：250px 1fr;
  网格板行：150px 1fr;
}

。孩子 {
  网格区域：1/1 / 2/2;
} 

看到笔
CSS堆叠，莎拉·德拉斯纳（Sarah Drasner）（@sdras）的网格1
在Codepen上。

而且，如果一个要素应堆叠在另一个元素上，我们可以将它们放在完全相同的网格区域中。我们还使用边距稍微抵消它们。

 .parent {
  显示：网格；
  网格板柱：250px 1fr;
  网格板行：150px 1fr;
}

。孩子 {
  网格区域：1/1 / 2/2;
}

.Child-2 {
  左键：200px;
} 

看到笔
CSS堆叠，莎拉·德拉斯纳（Sarah Drasner）（@sdras）的网格2
在Codepen上。

如果您发现这种技术难以可视化，我创建了一个CSS网格发电机，希望可以更清楚地看到事物。

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

以上是如何在CSS中堆叠元素的详细内容。更多信息请关注PHP中文网其他相关文章！