Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

问题在于.header和#content <div>并排显示，即使它们各自具有不同的z-index值。我认为这是因为flexbox。

我尝试过使用不同的水平和垂直居中方法，但是flexbox让我最接近我的想法。这是正确的做法，我只是缺少一些东西吗？我应该以不同的方式解决这个问题吗？

谢谢！

Answer 1

将弹性项目堆叠在一列中：
```
.container { flex-direction: column; }
```
使容器成为绝对定位的包含块：
```
.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>

Answer 2

我认为您只需要添加flex-direction: column;并设置order

http://jsbin.com/cuximuhemi/edit?html,css,output

这就是你想要的吗？

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

2 个答案: