проблема стека с элементами в переполнении 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

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>

Answer 2

Поскольку 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>