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.
