如何在 CSS 中堆叠元素？

在 CSS 中，堆叠顺序（stacking order）决定了网页上不同元素之间的覆盖关系。通过控制元素的堆叠顺序，可以实现一些有趣的效果，比如创建图层布局、实现特定的交互效果等。

下面介绍几种常用的控制堆叠顺序的方法及其对应的 CSS 属性：

1. z-index 属性

z-index 属性用于控制元素的堆叠顺序。它接受一个整数值作为参数，数值越大表示元素层级越高，即越靠近用户。

.example {
  z-index: 10;
}

2. position 属性

position 属性可以与 z-index 属性一起使用，以实现更灵活的堆叠顺序控制。

.example {
  position: relative;
  z-index: 10;
}

3. CSS 弹性布局

在使用 CSS 弹性布局时，元素的堆叠顺序也可以通过 order 属性来调整。

.example {
  order: 1;
}

4. CSS 网格布局

CSS 网格布局通过 grid-template-areas 属性给不同的单元格命名，可以使用 z-index 属性调整堆叠顺序。

.example {
  grid-area: box1;
  z-index: 10;
}

5. 使用伪元素

通过使用伪元素 ::before 或 ::after，可以在元素上创建一个覆盖层，从而实现元素的堆叠效果。

.example::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  /* 其他样式属性 */
}

以上是一些常用的在 CSS 中堆叠元素的方法，通过灵活控制堆叠顺序，可以实现丰富多样的效果。注意在使用堆叠顺序时，要避免过度使用或混乱的堆叠层级，以免影响网页的可读性和用户体验。

参考资料：

• MDN Web Docs - 层叠顺序
• CSS-Tricks - A Complete Guide to the z-index Property
• CSS-Tricks - CSS Positioning 101
• MDN Web Docs - order
• MDN Web Docs - grid-template-areas