How to reverse the order of nested child elements

Answer 1

You can't. The parent will always be behind the children, as z-index values are stacked.

The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes. - W3 http://www.w3.org/TR/CSS2/visuren.html#z-index

By setting a z-index on .a, you are also setting the same z-index on all the children. For instance, by setting z-index:999 on .a -- .b, and .c now also have the same indexes, rending it useless. To achieve this, the elements cannot be a parent nor a child of another, they would have to be siblings for this to work.

Here is what it would look like if they are siblings - it works!