The z index property allows us to specify the stock order of an element.
To better illustrate this let's take a look at an example on this HMO page.
We define this style for two divs diff blue and yellow the blue did has a width of 600 pixels a height
of 50 pixels background color blue.
It's position from the top is 0 pixels and a position property set to absolute the yellow div is almost
identical except the with is 400 pixels height is 400 pixels in the background color is yellow since
they both have the exact same top position these two divs are stacked on top of one another.
So let's take a look at this in our web browser to see what it looks like.
We can see that by default the yellow div is on top of the blue div but what if we wanted the yellow
div underneath the blue to in this case we need to specify the z index property for each to let's give
the yellow did a z index of 1
and the blue did a z index of 2
I've saved the page in and when to refresh and we can now see that the blue div is on top of the yellow
div because it has a higher z index.