如何使用jQuery或Css向前移动图像向上和向后移动图像？

Question

假设有两个圆形图像，前面一个完全覆盖后面的图像。当我点击前面的图像时，我希望它向上移动，后面的图像向下移动并停在彼此的圆边上。第二次单击将使前面的图像覆盖后面的图像。

Answer 1

如果您要将元素移到另一个元素的上方或下方，可以使用insertBefore和insertAfter：

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

这是一个jsFiddle：http://jsfiddle.net/Eb3cv/

Answer 2

示例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');

});

Here's an example