CSS: how to use the z-index property

Position the Box 1 above Box 2 by using the z-index property

Now BOX 1 is on the BOX 2.
We placed the BOX 2 so that it superimposed the BOX 1 but with the use of z-index property that now ranks below.

Magically, the "z-index" property created the desired effect in the box order of overlap.