title: are z-index of child elements local to the parent?
body: <p>Okay so I have this test setup in my html</p>
  
  <pre><code>&lt;div style="position:absolute;left:0px;top:0px;z-index:1;width:200px;height:200px;background-color:red;"&gt;
  &lt;div style="position:absolute;left:0px;top:0px;z-index:3;width:50px;height:50px;background-color:green;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div style="position:absolute;left:0px;top:0px;z-index:2;width:100px;height:100px;background-color:blue"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Where the I want the blue div to render in front of the red div, but I want the child div(green) of red to render in front of blue, looking at that code it seems it should work if z-index was global, but it seems to be local to the parent element, as the blue render above red, but the green doesn't render on top unless I move the green div up out of the parent? How can I use "global z-indexes" or whatever it is. It is vital to my actual project that it works this way</p>