flex布局实现元素重叠

如果要在 flex 布局中实现元素重叠，可以使用 `position: absolute` 属性和 `z-index` 属性。

具体步骤如下：

1. 将父元素设置为 `position: relative`，这样子元素的 `position: absolute` 就可以相对于父元素进行定位。

2. 对于需要重叠的子元素，设置 `position: absolute` 属性，并将其 `z-index` 值设为大于 0 的值，例如 `z-index: 1`。

3. 如果需要控制重叠的顺序，可以通过调整 `z-index` 的值来实现。`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;
  position: relative;
}

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

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

.box2 {
  background-color: blue;
  z-index: 2;
  top: 50px;
  left: 50px;
}

在这个例子中，`.container` 元素使用 flex 布局，并设置了 `position: relative`。`.box1` 和 `.box2` 元素都使用了 `position: absolute` 定位，并设置了不同的 `z-index` 值。`.box2` 元素的 `z-index` 值比 `.box1` 大，因此它会覆盖在 `.box1` 元素之上，实现重叠效果。