用变换堆叠绝对元素

时间:2016-07-15 21:17:41

标签: html css z-index css-transforms

我目前正在构建一个带有自定义绝对定位下拉列表的表单。其他输入字段使用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,但我未能达到预期效果..

1 个答案:

答案 0 :(得分:0)

而不是:

position: "relative";
position: "absolute";

尝试:

position: relative;
position: absolute;

此外,.input.top还需要position: relativeposition: absolute