How do I use the z-index properly?

Solution 1:

z-index applies to positioned elements.

Positioned elements are defined as elements for which the position property has a value other than static.

static is the default value.

You haven't applied a different position value to any of your elements.

You probably want position: relative;.

The z-index property will only work when there is also a position property applied (not counting position: static;, which is the default).

All of the following will work, according to the spec:

position: fixed;
position: absolute;
position: relative;
position: sticky; /* Limited support, currently in Firefox and Opera */

The only exceptions are within a flex container or a CSS grid.