如何在jquery中单击时更改元素的zIndex？

Question

我想在按钮点击时更改z-Index.我有一个静态图像和一个动态div.现在我想在静态图像后面发送#imgDiv1.但我不知道该怎么做.我尝试了一切,但都是徒劳的.

这是现场演示.jholo.com我想在这个Web应用程序中实现这个概念.

这是我的标记

<div id="safeZone">
    <img src="default.png" />

    <div id="imgDiv1">
         <img src="myPic.jpg" />
    </div>

</div>

<input id="back" type="button" value="Send To Back"/>
<input id="front" type="button" value="Bring To Front"/>

jQuery的

 $(document).ready(function(){ 

   $("#back").click(function(){
      $("#imgDiv1").css("z-index","-10");
   });

   $("#front").click(function(){
      $("#imgDiv1").css("z-index","10");
   });

});

Answer 1

该z-index样式属性只对不属于元素影响position: static.因此,您需要先设置position属性,然后才能看到其影响z-index.

HTML:

<button id="up">Up</button><button id="down">Down</button>
<div id="container">
    <img id="img1" src="http://dummyimage.com/300x200/ff0000/fff.jpg">
    <img src="http://dummyimage.com/300x200/00ff00/fff.jpg">
</div>

CSS:

#container img {position: absolute;}
#container {height: 200px; width: 300px;}

码:

$("#up").click(function(){
     $("#img1").css("z-index", -10);
  });

$("#down").click(function(){
    $("#img1").css("z-index",10);
});

工作演示:http://jsfiddle.net/jfriend00/5Efm3/

编辑 - 回复您的其他编辑:

为了达到你想要的效果,你还需要雪花般的图像在雪花形状内部具有透明度,从而允许后面的图像显示通过哪个意味着它不能是JPG.它可能是GIF或PNG.