我試圖將一個絕對定位的類(select)放在另一個絕對定位的類(drawer)之上。我已經嘗試了幾種解決辦法，但沒有一種奏效。此外，似乎兩個z指數都不會讓它起作用。

它看起來像什么

我想要的

代碼筆:

https://codepen.io/Luis-Henrique-Valgoi/pen/bGmzeNp

var label = document.querySelector('.label');
var select = document.querySelector('.select');

var clickHandler = function() {
  select.classList.toggle('hidden');
};

label.addEventListener('click', clickHandler);

body {
  background-color: blue;
  position: relative;
}

.drawer {
  position: absolute;
  background-color: white;
  height: 200px;
  width: 500px;
  right: 0;
  top: 0;
  overflow: hidden;
}

.field {
  position: relative;
}

.input {
  background-color: green;
}

.label {
  background-color: yellow;
}

.select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  background-color: red;
  transform: translate3d(0px, 20px, 0px);
  display: block;
  overflow: auto;
  will-change: transform;
  top: 0px;
  left: 0px;
}

.select.hidden {
  display: none;
}

<div class="drawer">
  <div class="field">
    <div class="input">
      <p>field</p>
    </div>
  </div>
  <div class="field">
    <div class="input">
      <p>field</p>
    </div>
  </div>
  <div class="field">
    <div class="label">
      <p>select</p>
    </div>
    <div class="select hidden">
      <p>option 1</p>
      <p>option 2</p>
      <p>option 3</p>
    </div>
  </div>
</div>

當您有多個絕對定位的元素時，為了控制它們的堆疊方式，您可以為每個絕對容器分配一個z索引并給它一個數字。較大的數字與其余的重疊。

但是這個案子看起來像是你的。抽屜類有一種溢出的風格:隱藏；它將截取容器外部的任何內容。演示中的行注釋。

var label = document.querySelector(".label");
var select = document.querySelector(".select");

var clickHandler = function () {
    select.classList.toggle("hidden");
};

label.addEventListener("click", clickHandler);

body {
    background-color: blue;
    position: relative;
}

.drawer {
    position: absolute;
    background-color: white;
    height: 200px;
    width: 500px;
    right: 0;
    top: 0;
/*     overflow: hidden; */
}

.field {
    position: relative;
}

.input {
    background-color: green;
}

.label {
    background-color: yellow;
}

.select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    background-color: red;
    transform: translate3d(0px, 20px, 0px);
    display: block;
    overflow: auto;
    will-change: transform;
    top: 0px;
    left: 0px;
}

.select.hidden {
    display: none;
}

<div class="drawer">
    <div class="field">
        <div class="input">
            <p>field</p>
        </div>
    </div>
    <div class="field">
        <div class="input">
            <p>field</p>
        </div>
    </div>
    <div class="field">
        <div class="label">
            <p>select</p>
        </div>
        <div class="select hidden">
            <p>option 1</p>
            <p>option 2</p>
            <p>option 3</p>
        </div>
    </div>
</div>