The z-index property to create an effect of layers

Basically, the z-index property is used to create a layer on top of another layer effect. Z-index is used to make some/a element(s) look like it is/are on top

or under another. You can specify which element should be under and which one should be on top(i.e, stacking them up).

The Z-index property only works on Positioned elements . Meaning you can only apply this property to an element with style position to it. For example :

#container {position: absolute;z-index: 1;}

The z-index property can equally take negative values e.g -1

Stacking The Layers

The z-index property controls the vertical order of elements that overlap. As in, which appears as if it is closer to you. As mentioned earlier it affects only elements with that have position value other than thestatic(which is the default).

Why Use The Z-index?

Without z-index value elements stack in the order they appear in the DOM(the lowest element at the same level appears on top). Elements with non-static positioning i.e given another position value like absolute or relative(default) will always appear on top of elements with default static positioning

Elements can overlap for a variety of reasons, for instance, relative positioning has nudged it over something else.

Negative Margin has pulled one element over another. Absolutely positioned elements overlap each other. All sorts of reasons. Also, note that nesting plays a big role. If an element B sits on top of an element A, a child element of,A can never be higher than element B

The CSS code above will produce the stacked div containersa as so