z-index 的使用

图片1.png
图片2.png

如何将图片1:变成图片2

.son4{
            padding: 5px;
            margin: 1px;
            background-color: rgb(55, 185, 202);
            border: 3px solid #f11313;
            position: absolute;  
            top: 10px;
            left: 20px;
            /* z-index: 1; */

        }

        .son5{
            padding: 5px;
            margin: 1px;
            top: 40px;
            left: 50px;
            background-color: rgb(45, 235, 209);
            border: 3px solid #f11313;
            position: absolute;  
            /* z-index: 0; */

        }

        .son6{
            padding: 5px;
            margin: 1px;
            top: 70px;
            left: 70px;
            background-color: rgb(146, 71, 245);
            border: 3px solid #f11313;
            position: absolute;  
            /* z-index: -1; */

        }

    <div class="son4">AAAAAAAAA </div>
    <div class="son5">BBBBBBBBB </div>
    <div class="son6">CCCCCCCCC </div>