HTML覆盖不到flexbox布局

在HTML中，可以使用CSS的position属性来实现覆盖效果。对于flexbox布局，可以将要覆盖的元素设置为绝对定位，并通过top、right、bottom、left属性来调整其位置。

以下是一个示例代码：

HTML代码：

<div class="flex-container">
  <div class="box">Flexbox布局</div>
  <div class="overlay">覆盖层</div>
</div>

CSS代码：

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  position: relative; /* 设置父容器为相对定位 */
}

.box {
  background-color: lightblue;
  padding: 20px;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 20px;
  position: absolute; /* 设置覆盖层为绝对定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中定位 */
}

在上述代码中，.flex-container是一个使用flexbox布局的容器，.box是flexbox布局中的一个元素，.overlay是要覆盖在flexbox布局上的元素。通过将.flex-container设置为相对定位，将.overlay设置为绝对定位，并通过top、left属性将其定位到父容器的中心位置。

这样就可以实现覆盖效果，.overlay会覆盖在.box上方。