title: how to make a div with transform: translate 3d stack up on top of a masked layer ( not working despite Z-index being higher)
body: <p>I am trying to  make a div with transformation(CSS) stack up on top; here is the markup, I need  only the green div to show up on top of blue div. Basically the blue is a masked layer and the green is a dialog that shows up on top of it. </p>
  
  <p>I tried setting the <code>z-index</code>, which din't work. The blue always shows up on top of the green.</p>
  
  <p>Also if I change the blue div to be the sibling of the the green div then it works, but I want to keep the mark up the same i.e the blue div is a sibling parent to green div</p>
  
  <p>Any pointers?</p>
  
  <p>Here is the js fiddle link...
  <a href="http://jsfiddle.net/YRTxt/9/" rel="nofollow">http://jsfiddle.net/YRTxt/9/</a></p>
  
  <p>CSS</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="red"&gt;
          &lt;div id="pink"&gt;
              &lt;div id = "green"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;   
  &lt;/div&gt;
  &lt;div id="blue"&gt;
  &lt;/div&gt;
  </code></pre>