我目前正在构建一个带有自定义绝对定位下拉列表的表单。其他输入字段使用transform: translateY
进行动画处理。但是,我根本无法在下面的输入元素之上进行堆叠下拉。我已将问题简化为以下内容:
HTML:
<div class="a"></div>
<div class="a top">
<div class="b"></div>
</div>
<div class="a"></div>
的CSS:
.a {
transform: translateY(10px);
position: "relative";
background: red;
height: 50px;
margin-top: 10px;
z-index: 1;
opacity: 0.8;
}
.b {
position: "absolute";
top: 0;
height: 100px;
width:25px;
background: blue;
}
.input.top {
z-index: 10;
}
以下小提琴说明了我的问题: https://jsfiddle.net/m817ffqy/1/
我已尝试transform-style: flat
并设置translateZ
,但我未能达到预期效果..
答案 0 :(得分:0)
而不是:
position: "relative";
position: "absolute";
尝试:
position: relative;
position: absolute;
此外,.input.top
还需要position: relative
或position: absolute
。