Even for 2D elements, our third dimension, the z-axis, represents stacking order. In other words, what elements stack or overlap on top of other elements? Changes to z-index don't actually move our elements. This isn't controlling real depth. But z-index does help us position elements when we stack them.
Essentially, elements with a higher a z-index value show up on top of elements with a lower z-index value. There are some caveats:
If we have two elements (each of these elements has children), z-index will control stacking for those parent elements. But if element A has a higher z-index than element B? The children of element B can never overlap any part of element A. Even if the z-index is 700 billion.
Let's look at this in the Designer. Three div blocks, side-by-side. Our intention here is to have the middle div block overlap the outside div blocks. The normal stacking order here is that the first one is on the bottom; the second one is above that, and the third is above that.
Let's select the middle div block, which is set to relative positioning (keep in mind that z-index is only available on relative, absolute, and fixed positioning). And let's set the z-index to 1. Now it stacks on top! That's because the default z-index is zero. Keep in mind that setting the z-index to a negative value means we could lose element visibility because it'll get rendered underneath most elements.
Let's select the left one and set the z-index to 2. What's going to happen? Well, like we learned in AP Calc, 2 is greater than 1. So of course, it'll stack above. Let's select the right one. Set it to 2 as well. Or 3. Doesn't matter. It's greater than the middle div block which is set to a z-index of 1. If we set our middle guy to 4? You get the idea.
So, Z-index. We can control the stacking order of elements, with higher values stacking on top of lower values.