z-index is how you control the order of overlapping layers.

For this example, you need to use the following html:

<div class="box green"></div>
<div class="box blue"></div>
<div class="box red"></div>

By default, these boxes would be stacked with green on the bottom, red on top, and blue in the middle. We're going to manipulate that.