flex布局实现元素重叠

在 flex 布局中，元素默认是不会重叠的，因为子元素的位置是由父元素控制的。但是，我们可以通过一些技巧实现元素重叠。

一种方法是使用 `position` 属性与 `z-index` 属性来控制元素的叠放顺序。我们可以将需要重叠的元素的定位设置为 `absolute` 或 `fixed`，然后使用 `z-index` 属性来控制它们的层级关系。例如：

<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}

.box1 {
  background-color: red;
  z-index: 1;
}

.box2 {
  background-color: blue;
  z-index: 2;
}

在上面的例子中，我们将 `.container` 设置为相对定位，并将需要重叠的 `.box` 元素设置为绝对定位。然后，通过设置不同的 `z-index` 属性，控制它们的层级关系，使 `.box2` 元素在 `.box1` 元素之上。

还有一种方法是使用负边距。我们可以将元素的宽度和高度设置为相同的值，然后使用负的 `margin` 值来控制元素的位置。例如：

<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.box {
  width: 100px;
  height: 100px;
}

.box1 {
  background-color: red;
  margin-right: -50px;
}

.box2 {
  background-color: blue;
  margin-left: -50px;
}

在上面的例子中，我们将 `.box1` 元素的右边距设置为负的一半宽度，将 `.box2` 元素的左边距设置为负的一半宽度，使它们重叠在一起。需要注意的是，这种方法可能会破坏布局，需要谨慎使用。