如何在 flexbox 容器中将两个 <div> 分层？

Question

我有一个 flexbox 容器，里面有两个<div>s。一个<div>s 是标题，另一个<div>是隐藏的，直到触发事件。当所述事件被触发时，我想让隐藏的<div>出现在另一个之上。

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  max-width: 600px;
}

#content {
  display: none;
  max-width: 600px;
}

.changed #content {
  display: block;
  z-index: 100;
}

.changed .header {
  opacity: .3;
  z-index: 0;
}

<div class="container">
  <div class="header">
    <h1>Heading</h1>
    <h2>Subheading</h2>
    <div class="icons">Icons</div>
  </div>
  <div id="content"></div>
</div>

类.changed是添加到.container呈现#content <div>可见的类。这部分工作正常。

问题是 the.header和#content <div>s 并排出现，即使它们每个都有不同的z-index值。我认为这是因为 flexbox。

我尝试使用不同的水平和垂直居中方法，但 flexbox 使我最接近我想要的。这是正确的方法，我只是错过了什么？我应该以不同的方式解决这个问题吗？

谢谢！

Answer 1

• 将 flex 项目堆叠在一列中：

  .container { flex-direction: column; }
  

• 使容器成为绝对定位的包含块：

  .container { position: relative; }
  

• 绝对将隐藏的 div 放在标题上：

  #content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  

然后z-index根据需要应用您的 JS 。

.container { flex-direction: column; }

.container { position: relative; }