html - 如何使用转换 : translate 3d stack up on top of a masked layer ( not working despite Z-index being higher) 制作一个 div

Question

我正在尝试制作一个带有转换 (CSS) 的 div 堆叠在顶部；这是标记，我只需要绿色 div 显示在蓝色 div 之上。基本上，蓝色是蒙版层，绿色是显示在其上的对话框。

我尝试设置 z-index，但没有用。蓝色总是出现在绿色之上。

此外，如果我将蓝色 div 更改为绿色 div 的同级，那么它会起作用，但我想保持标记不变，即蓝色 div 是绿色 div 的同级父级

有什么建议吗？

这是 js fiddle 链接... http://jsfiddle.net/YRTxt/9/

CSS

#wrapper{
    width:100%;
}
#red, #green{
    height:200px;
    width:400px;
}
#red{
    background-color:red;
    position:absolute;
    -webkit-transform: scale(1);
}
#pink{
    background-color:pink;
    height:250px;
    width:150px;
    top: 50px;
    position:absolute;
    -webkit-transform: translate3d(0%,0px,0px);
    -webkit-perspective: 1000;
}
#green{
    background-color:green;
    position:absolute;
    -webkit-transform: translate3d(0,0,0);
    top:100px;
    right: 0px;
    left: 0px;
    z-index: 1111;
}
#blue{
    background-color: blue;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top:0px;
    right: 0px;
    z-index: 100;
}

HTML

<div id="wrapper">
    <div id="red">
        <div id="pink">
            <div id = "green"/>
        </div>
    </div>   
</div>
<div id="blue">
</div>

Answer 1

要使 z-index 起作用，您必须为两个元素都设置一个 z-index。我更新了 http://jsfiddle.net/rTkyR/ ，我只将 z-index 添加到 CSS 中的蓝色和绿色 div。

HTML

<div id="wrapper">
    <div id="red">
        <div id="pink">
            <div id = "green"/>
        </div>
    </div>   
</div>
<div id="blue">
</div>

CSS

#wrapper{
    position:relative;
    width:100%;
}
#red, #green{
    height:200px;
    width:400px;
}
#red{
    background-color:red;
    position:relative;
}
#pink{
    background-color:pink;
    height:250px;
    width:150px;
    top:50px;
    right:20px;
    position:absolute;
}
#green{
    background-color:green;
    position:absolute;
    -webkit-transform: translate3d(0,0,0);
    top:0px;
    right: 0px;
    left: 0px;
    z-index: 1;
}
#blue{
    background-color: blue;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top:0px;
    right: 0px;  
    z-index: 0;
}