html - 如何在 flexbox 容器中放置两个 <div>？

Question

我有一个 flexbox 容器，它有两个 <div>在里面。 <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>

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

问题是 .header和 #content <div> s 并排出现，尽管它们各自有不同的 z-index值。我认为这是因为 flexbox。

我尝试过使用不同的水平和垂直居中方法，但 flexbox 使我最接近我想要的。这是正确的方法吗，我只是遗漏了什么？我应该换一种方式吗？

谢谢!

Answer 1

• 将 flex 元素堆叠成一列:

  .container { flex-direction: column; }
  

• 使容器成为绝对定位的包含 block :

  .container { position: relative; }
  

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

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

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

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.header {
  max-width: 600px;
  background-color: aqua;
}

#content {
  /* display: none; */
  max-width: 600px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.changed #content {
  /* display: block; <-- not necessary */
  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">HIDDEN DIV
  </div>
</div>