Question

我试图将一些div放在彼此之上（即重叠）的div内，这是一个儿童flex元素。我猜js小提琴会有所帮助：

#m1和#m2 div应该显示在彼此之上并占据#mainpanel div的整个空间。（在此示例中，文本＆＃39; Mainpanel1 ...＆＃39;以及＆＃39; Mainpanel2 ...＆＃39;应该出现在彼此的顶部。）如果可能，这应该在不引用的情况下完成外部元素的大小，因为布局是动态的（可以在小提琴中看到）。

我尝试使用position: absolute，但之后它们不再相对于其父级定位。我尝试了其他各种方法，但都没有成功。（我想我可以列出它们，但由于它们不成功，它们只会是不必要的混乱。）

Answer 1

如果你使用flex，你需要一直使用display和flex值：

必须使用转换和 overflow:hidden;的示例，因为#m2不是绝对的 ......

body {
  margin: 0;
}
#outer-flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#inner-flex-container {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}
#header {
  height: 20px;
  background-color: green;
}
#mainpanel {
  display: flex;
  flex-direction: column;
  flex: 3;
  background: rgba(200, 222, 123, 0.6);
  overflow: hidden;
}
#m1 {
  background: rgba(123, 222, 200, 0.3);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,0.3);
}
#m2 {
  background: rgba(222, 125, 200, 0.3);
  transform: translatey(-100%);
  box-shadow:inset 0 0 0 6px rgba(0,0,0,0.3);
  border-radius:2em;
}
#m1,
#m2 {
  flex: 0 0 100%;
  width: 100%;
  overflow: auto;/* ? maube useful */
}
#aside {
  flex: 1;
  background-color: orange;
}
#footer {
  height: 20px;
  background-color: lightblue;
}
@media screen and (max-width: 500px) {
  #inner-flex-container {
    flex-direction: column;
  }
  #mainpanel {
    height: 100vh;
  }
  #aside {
    height: auto;
  }
}

<div id="outer-flex-container">

  <div id="header">The Header The Header The Header The Header</div>

  <div id="inner-flex-container">
    <div id="mainpanel">
      <div id="m1">
        Mainpanel1 Mainpanel1 Mainpanel1 Mainpanel1
      </div>
      <div id="m2">
        Mainpanel2 Mainpanel2 Mainpanel2 Mainpanel2
      </div>
    </div>
    <div id="aside">
      settings settings settings settings settings settings settings settings settings ter
    </div>
  </div>
  <div id="footer">The Footer The Footer The Footer The Fooner-flex-containe
  </div>
</div>

添加了2种不同尺寸的嵌入阴影，以显示m1＆amp; m2正在站着

在flex子中重叠div

1 个答案: