堆栈溢出z-index和flex容器中的项目问题

Question

我有两个部分叠在一起，如下所示，这可以在这个jsfiddle中看到。

我希望下拉列表显示在底部，但是，设置z-index无效。此外，我知道我可以更新.card也是position: absolute它会工作，但这打破了我的整个布局，所以不是一个真正的选择。

有没有人知道如何在不将.card类更改为position: absolute的情况下使下拉列表显示在底部？

h3, p {
  margin: 0;
}

.wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.row-one {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex: 0 1 200px;
  background: red;
  overflow-y: auto;
}

.card {
  position: relative;
  /* uncomment line below to see how the dropdown should look */
  /* position: absolute; */
  background: orange;
  width: 200px;
  height: 100px;
}

.dropdown {
  height: 300px;
  width: 200px;
  background: blue;
  z-index: 2;
  position: absolute;
  top: 50px;
  left: 0;
}

.row-two {
  flex: 1;
  display: flex;
  background: #fff;
  flex-direction: column;
  background: pink;
  height: 100%;
}

<div class="wrapper">
  <div class="row-one"> 
      <h3>Top Section</h3>
      <div class='card'>
        <p>I'm a card</p>
        <div class="dropdown">
          <h1>DROPDOWN</h1>
          <p>item</p>
          <p>item</p>
          <p>item</p>
          <p>item</p>
          <p>item</p>
        </div>
      </div>
  </div>

  <div class="row-two">
    <h3>Bottom Section</h3>
    <p>...content</p>
    <p>...content</p>
    <p>...content</p>
  </div>
</div>

Answer 1

由于card有position: relative，绝对定位的儿童内部受到约束（这也适用于z-index）。你可以将position: relative放在wrapper上。

h3, p {
  margin: 0;
}

.wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  /* add positon relative */
  position:relative;
}

.row-one {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex: 0 1 200px;
  background: red;
  overflow-y: auto;
}

.card {
  /* remove position relative */
  background: orange;
  width: 200px;
  height: 100px;
}

.dropdown {
  height: 300px;
  width: 200px;
  background: blue;
  z-index: 2;
  position: absolute;
  top: 50px;
  left: 0;
}

.row-two {
  flex: 1;
  display: flex;
  background: #fff;
  flex-direction: column;
  background: pink;
  height: 100%;
}

<div class="wrapper">
  <div class="row-one"> 
      <h3>Top Section</h3>
      <div class='card'>
        <p>I'm a card</p>
        <div class="dropdown">
          <h1>DROPDOWN</h1>
          <p>item</p>
          <p>item</p>
          <p>item</p>
          <p>item</p>
          <p>item</p>
        </div>
      </div>
  </div>

  <div class="row-two">
    <h3>Bottom Section</h3>
    <p>...content</p>
    <p>...content</p>
    <p>...content</p>
  </div>
</div>

Answer 2

z-index不适用于静态定位的元素。你至少需要在position: relative;上使用.dropdown来为z-index工作。另外我认为你不需要overflow-y: auto;上的.row-one，它应该更像overflow-y: visible;。这是我的看法。

链接到jsfiddle：https://jsfiddle.net/gh5ne2or/

h3, p {
  margin: 0;
}

.wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.row-one {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex: 0 1 200px;
  background: red;
  overflow-y: visible;
}

.card {
  position: relative;
  /* uncomment line below to see how the dropdown should look */
  /* position: absolute; */
  background: orange;
  width: 200px;
  height: 100px;
}

.dropdown {
  height: 300px;
  width: 200px;
  background: blue;
  z-index: 2;
  position: relative;
  top: 0;
  left: 0;
}

.row-two {
  flex: 1;
  display: flex;
  background: #fff;
  flex-direction: column;
  background: pink;
  height: 100%;
}

<div class="wrapper">
  <div class="row-one">

      <h3>Top Section</h3>
      <div class='card'>
        <p>I'm a card</p>
        <div class="dropdown">
          <h1>DROPDOWN</h1>
          <p>item</p>
          <p>item</p>
          <p>item</p>
          <p>item</p>
          <p>item</p>
        </div>
      </div>
     
  </div>

  <div class="row-two">
    <h3>Bottom Section</h3>
    <p>...content</p>
    <p>...content</p>
    <p>...content</p>
  </div>
</div>