are z-index of child elements local to the parent?

Question

Okay so I have this test setup in my html

<div style="position:absolute;left:0px;top:0px;z-index:1;width:200px;height:200px;background-color:red;">
<div style="position:absolute;left:0px;top:0px;z-index:3;width:50px;height:50px;background-color:green;"></div>
</div>

<div style="position:absolute;left:0px;top:0px;z-index:2;width:100px;height:100px;background-color:blue"></div>

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

Answer 1

Z-indices are always local, or relative, to the closest positioned ancestor (in this case the parent). There is no global z-index property in CSS.

You will have to move the green div out of its parent.