css - flex box容器可以绝对定位吗

Question

能否将一个 flex 容器 (A) 绝对定位在另一个 flex 容器 (B) 的前面或后面，并且仍然保持其子容器的 flex 属性？

我的问题:当我将 flex-container(B) 分配给 position:absolute 时，里面的子内容失去了自动 flex 属性。当我切换回 position:relative 时，flex 再次工作。当 container(B) 是相对的时，我不能像我需要的那样覆盖在另一个 flex container(A) 之上。

研究:找到所有关于父 flex 容器中子元素绝对定位的所有内容(W3C 和 CSS 技巧等)，但没有什么具体到足以将 flex 容器绝对移动到另一个 flex 容器之上(这让我想知道这是否可能!) .如果是这样，我会很高兴。

最终目标:想要将一个相邻的 flex 容器覆盖在另一个具有不同 z-index 的容器之上。

提前致谢。

Answer 1

由于我们不知道您的原始代码是什么样子，这里是一个总体布局，其中一个 flex 容器 绝对定位在另一个之上。

为了使 position: absolute 元素与其兄弟元素对齐，我将它们都包裹起来并给第二个 width: 100%

.wrap {
  position: relative;
}
.a, .b {
  display: flex;
  height: 120px;
  left: 0;
  top: 0;
}
.a {
  background: red;
}
.b {
  position: absolute;
  top: 50px;
  height: 50px;
  width: 100%;
  background: blue;
}
.wrap > div > div {
  flex: 1;
  padding: 20px 50px;
  margin: 5px;
  background: green;
}
.wrap div div:first-child {
  flex-basis: 50%;
}

<div class="wrap">
  <div class="a">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class="b">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>