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:

Código 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;
		}
		```

código JS
        ```
		$(document).ready(function() {
		$(".ta").click(function () {
		$(this).css({"z-index":"100","left":"140","top":"140"});
		$(this).siblings().css({"z-index":"0","left":"","top":""});
		});
		});
        ```


código HTML

        ```
		<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>
        ```