Estoy con un problema de 6 divs apilados, solapados pero desplazados hacia abajo y hacia la derecha de tal modo que me permite dar clic a cada uno de éllos. Lo que quiero es que al dar clic en cualquiera de estos, se desplace al frente; pero que el div anterior se mueva a ocupar su lugar. He probado con un script de JQuery, pero no logro conseguirlo. Aqui está el codigo que he probado: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $(document).ready(function() { $(".ta").click(function () { $(this).css({"z-index":"100","left":"140","top":"140"}); $(this).siblings().css({"z-index":"0","left":"","top":""}); }); }); <!-- language: lang-css --> #padre{ border:solid 1px #2A1212; width: 550px; height: 500px; background-color: #D8E9F4; position: relative; } .ta{ border:double 4px #2D2727; border-radius: 5px; width: 350px; height: 250px; position: absolute; } #tab1{ background-color: #F40C0C; left: 20px; top: 20px; z-index: 1; } #tab2{ background-color: #EC0CF4; left: 40px; top: 40px; z-index: 2; } #tab3{ background-color: #2D0CF4; left: 60px; top: 60px; z-index: 3; } #tab4{ background-color: #0CF1F4; left: 80px; top: 80px; z-index: 4; } #tab5{ background-color: #0CF43D; left: 100px; top: 100px; z-index: 5; } #tab6{ background-color: #F1F40C; left: 120px; top: 120px; z-index: 6; } <!-- 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 -->