I am attempting to stack a green div on top of a blue div using CSS transformations. The blue div acts as a masked layer, while the green div is a dialog that should appear on top.
I have tried adjusting the z-index property, but the blue div always ends up on top of the green one.
If I rearrange the HTML so that the blue div is a sibling of the green div, it works as intended. However, I would like to keep the structure the same with the blue div as a parent sibling to the green div.
Any suggestions?
Here is the link to the jsFiddle for reference: http://jsfiddle.net/YRTxt/9/
CSS code:
#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 code:
<div id="wrapper">
<div id="red">
<div id="pink">
<div id = "green"/>
</div>
</div>
</div>
<div id="blue">
</div>