The z-index Property
Learn how to stack elements with z-index.
We'll cover the following
The z-axis
In CSS, each box can be thought of as having a position
in 3D. So far, we’ve seen positioning related to both the horizontal x-axis and vertical y-axis, but boxes also have a z-axis where they stack on top of each other.
The z-index
property sets the stacking order of all elements on the z-axis. It only works on elements that have a defined position
that’s anything other than the default position:static;
.
So, when we have multiple overlapping elements on a web page, the z-index
property lets us decide which one is visible (or nearest to the user) and the order of any element(s) that sit behind it.
Example
Get hands-on with 1200+ tech skills courses.