CSS问题，顶行元素隐藏在底行之下

Question

我将两个部分堆叠在一起，如下所示：

///////

Row One <----- I want the dropdown in here to appear over row two

///////

Row Two

///////

问题在于下拉列表的底部隐藏在第2行下方。如果我删除overflow-y: auto和z-index的组合，则会使整个顶部超过底部，但是我只是希望将下拉列表放置在底部上方。

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

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

.row-wrapper {
  overflow-y: auto;
  z-index: 10000;
}

.card {
  position: relative;
  background: white;
}

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

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

<div class="wrapper">
  <div class="row-one">
    <div class="row-wrapper">
      <p>TOP CONTENT</p>
      <div class="card">
        <p>Im 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>

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

（fiddle）

Answer 1

这可以解决您的问题吗？我已将position和.card的{​​{1}}属性分别设为.dropdown和absolute。

relative

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

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

.row-wrapper {
  overflow-y: auto;
  z-index: 10000;
}

.card {
  position: absolute;
  background: white;
}

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

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