Question

一个柔性容器（A）是否可以绝对位于另一个柔性容器（B）的前面或后面，并且仍能保持其儿童的柔韧性？

我的问题：当我将flex-container（B）分配给position：absolute时，里面的子内容会丢失自动flex属性。当我切换回位置：relative时，flex再次工作。当容器（B）是相对的时，我不能像我需要的那样覆盖在另一个柔性容器（A）的顶部。

研究：在父级Flex容器（W3C和CSS技巧等）中找到关于儿童绝对定位的所有内容，但没有什么特别的东西可以将容器完全移动到另一个弹性容器上（这让我想知道它是否是这样）甚至可能！）。如果是这样，我会罗林＆＃39;快乐

终极目标：希望将一个相邻的Flex容器覆盖到另一个具有不同z索引的Flex容器上。

提前致谢。

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>

可以绝对定位柔性盒容器

1 个答案: