Как переместить переднее изображение вверх и заднее изображение вниз при нажатии?, С помощью jQuery или Css

Question

Предположим, есть два круглых изображения, переднее полностью покрывает заднее.Когда я нажимаю на переднее изображение, я хочу, чтобы оно двигалось вверх, а заднее изображение двигалось вниз и останавливалось на закругленных краях друг друга.Второй щелчок заставит переднее изображение накрыть заднее.

Answer 1

Образец CSS

.above{position:absolute;z-index:2}
.under{position:absolute;z-index:3}
.container{position:relative;z-index:1}

Образцы объектов

<div class="container">  
<img id="img1" class="above" src="..." />
<img id="img2" class="under" src="..." />
</div>

Образец JQuery

$('img').click(function(){

 $('#img1').toggleClass('above');
 $('#img1').toggleClass('under');
 $('#img2').toggleClass('above');
 $('#img2').toggleClass('under');

});

Вот пример

Answer 2

Если вы хотите переместить элемент выше или ниже другого элемента, вы можете использовать insertBefore и insertAfter:

$("#div1").insertAfter($("#div2"));

Вот jsFiddle: http://jsfiddle.net/Eb3cv/