Discussion on: Quick CSS Quiz #5

This quiz requires a deep knowledge of how CSS z-index works, we will start by applying the first four CSS rule-sets:

.red { z-index: 100; }
.blue { z-index: 50; }
.green { z-index: 2; }
.black { z-index: 0; }

This will re-arrange the squares as flowing: .black in the most back then .green then .blue and finally the '.red' at the top, this arrange is intuitive, an element with a larger z-index covers an element with a lower one.
But when you add the final rule-set

.first { transform: translateZ(10px); }

You expect to move the .first two square (red and green squares) to be on top of the other squares (black and blue squares), but you got a completely different output, and the z-index now is completely unreasonable.

CSS has layers which is slightly looks like the Photoshop layers (surprise), z-index arrange elements within that layer, larger z-index element on top and the smaller on bottom, that's what happened when you added transform property you make .first a separate layer with auto z-index, so it will behind the .second div elements.

And this is how it will looks in Chrome DevTool Layers Panel