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:
$(document).ready(function() {
$(".ta").click(function () {
$(this).css({"z-index":"100","left":"140","top":"140"});
$(this).siblings().css({"z-index":"0","left":"","top":""});
});
});
#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;
}
<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>