Uso del z-index en css

A continuación indicaré como establecer el orden de los div con respecto al eje z:

1. En primer lugar, se realiza la creación de un section, el cual tendrá 5 div dentro cada uno con una clase relacionada al color que tendrá.

<section>
        <div class="r"></div>
        <div class="y"></div>
        <div class="b"></div>
        <div class="g"></div>
        <div class="p"></div>
    </section>

1. En segundo lugar, se aplica el display flexbox, con la propiedad justify-content en center para poder ubicarlos al centro de la página.

section{
                display: flex;
                justify-content: center;
            }

1. En tercer lugar, se establece el font-size del html en 62.5% lo equivalente a 10px por cada rem.

html{
                font-size: 62.5%;
            }

1. Finalmente, se agrega el width y heigth en 10rem. Se da un border-radius de 50% para la forma circular. Se establece el background de cada color para poder ubicarlos, y se establece un margin-left para poder establecer los circulos al lado inverso del que fueron colocados (de izquierda a derecha). Por último, se agrega z-index al primer div que sería el red, se establece el valor de 6 (el cual es el valor más alto, por ende se irá al frente en el eje z)

						.r{
                width: 10rem;
                height: 10rem;
                border-radius: 50%;
                background: red;
                z-index: 5;
            }
            .y{
                width: 10rem;
                height: 10rem;
                border-radius: 50%;
                margin-left: -5rem;
                background: yellow;
                z-index: 4;
            }
            .b{
                width: 10rem;
                height: 10rem;
                border-radius: 50%;
                margin-left: -5rem;
                background: blue;
                z-index: 3;
            }
            .g{
                width: 10rem;
                height: 10rem;
                border-radius: 50%;
                margin-left: -5rem;
                background: green;
                z-index: 2;
            }
            .p{
                width: 10rem;
                height: 10rem;
                border-radius: 50%;
                margin-left: -5rem;
                background: purple;
            }