En CSS usa ID solo para asignar color, clase para el resto de atributos y, para las posiciones, usa [div:nth-child](https://developer.mozilla.org/es/docs/Web/CSS/:nth-child), asignando ubicación de acuerdo a la posición del elemento dentro de _#padre_ (1 a 6).

Cuando se hace clic en uno de los elementos muévelo al frente, aprovechando que `jQuery(padre).append(elemento)` o `Node.appendChild(elemento)` simplemente mueven el elemento al final del contenedor, aplicando automáticamente las reglas CSS para reubicar todos los divs:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(document).ready(function() {
        $(".ta").click(function () {
            // Posición del elemento actual (0 a 5)
            let index = $(this).index();
            // Mover solo si no está ya al frente
            if(index < 5) {
                // Traer el elemento del frente (5)
                // a la posición del elemento que recibió el clic
                $(".ta").eq(5).insertBefore($(this));
                // Enviar elemento al frente
                $("#padre").append($(this));
            }
        });
    });

<!-- language: lang-css -->

    #padre{
            border:solid 1px #2A1212;
            width: 550px;
            height: 500px;
            background-color: #D8E9F4;
            position: relative;
    }
    #padre div:nth-child(1) {
            left: 20px;
            top: 20px;
            z-index: 1;
    }
    #padre div:nth-child(2) {
            left: 40px;
            top: 40px;
            z-index: 2;
    }
    #padre div:nth-child(3) {
            left: 60px;
            top: 60px;
            z-index: 3;
    }
    #padre div:nth-child(4) {
            left: 80px;
            top: 80px;
            z-index: 4;
    }
    #padre div:nth-child(5) {
            left: 100px;
            top: 100px;
            z-index: 5;
    }
    #padre div:nth-child(6) {
            left: 120px;
            top: 120px;
            z-index: 6;
    }
    .ta{
            border:double 4px #2D2727;
            border-radius: 5px;
            width: 350px;
            height: 250px;
            position: absolute;
    }
    #tab1{
            background-color: #F40C0C;
    }
    #tab2{
            background-color: #EC0CF4;
    }
    #tab3{
            background-color: #2D0CF4;
    }
    #tab4{
            background-color: #0CF1F4;
    }
    #tab5{
            background-color: #0CF43D;
    }
    #tab6{
            background-color: #F1F40C;
    }

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="padre">
            <div id="tab1" class="ta"></div>
            <div id="tab2" class="ta"></div>
            <div id="tab3" class="ta"></div>
            <div id="tab4" class="ta"></div>
            <div id="tab5" class="ta"></div>
            <div id="tab6" class="ta"></div>
    </div>

<!-- end snippet -->