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

Question

Okay so I have this test setup in my html ```

``` 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

Accepted Answer

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.

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

Solution

Problem