html - how to make a div with transform: translate 3d stack up on top of a masked layer ( not working despite Z-index being higher) -

i trying make div transformation(css) stack on top; here markup, need green div show on top of blue div. blue masked layer , green dialog shows on top of it.

i tried setting z-index, din't work. blue shows on top of green.

also if change blue div sibling of the green div works, want keep mark same i.e blue div sibling parent green div

any pointers?

here js fiddle link... 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> 

for z-index work have have z-index both elements. updated http://jsfiddle.net/rtkyr/, added z-index css 2 blue , green divs.

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; }