我正在try 使一个绝对定位的类(SELECT)位于另一个绝对定位的类(抽屉)之上.我试过几种解决方案,但都不能奏效.此外,似乎两个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>