javascript - How to change zIndex of an element on click in jquery? - Stack Overflow

admin管理员组

文章数量:1397093

I want to change z-Index on button click. I have a static image and a dynamic div. Now I want to send the #imgDiv1 behind the static image. But I don't know how to do this. I tried everything but all in vain.

Here is the live demo. jholo I want to implement this concept in this web application.

Here is my mark up

<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");
   });

});

I want to change z-Index on button click. I have a static image and a dynamic div. Now I want to send the #imgDiv1 behind the static image. But I don't know how to do this. I tried everything but all in vain.

Here is the live demo. jholo. I want to implement this concept in this web application.

Here is my mark up

<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");
   });

});

• javascript
• jquery
• html
• css
• z-index

Share Improve this question Follow edited Mar 27, 2014 at 0:25 Fazil Mir asked Mar 26, 2014 at 23:18 Fazil MirFazil Mir 83322 gold badges1010 silver badges2525 bronze badges 5

• 1 Do you have other CSS that goes with this that sets the position property? z-index has no effect on objects with the position property set to something like absolute or fixed. – jfriend00 Commented Mar 26, 2014 at 23:21
• no. I dont have other css. :( – Fazil Mir Commented Mar 26, 2014 at 23:25
• What version of jQuery are you using? Seems to work in this example: jsfiddle/g9XbD Note the css that sets position: absolute. – Rick Dailey Commented Mar 26, 2014 at 23:25
• 1.10.2. I don't understand whats wrong with this. – Fazil Mir Commented Mar 26, 2014 at 23:29
• You must set position, as explained in answer bellow - something like this> jsfiddle/DDLp2/1 – sinisake Commented Mar 26, 2014 at 23:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The z-index style property only takes affect on elements that are not position: static. So, you will need to set the position property before you can see the impact of z-index.

HTML:

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

CSS:

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

Code:

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

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

Working demo: http://jsfiddle/jfriend00/5Efm3/

---

Edit - Responding to your additional edit:

To achieve the effect you're looking for, you will also need the snowflake like image to have transparency inside the snowflake shape thus allowing the behind image to show through which means it can't be a JPG,. It could be GIF or PNG.

I used opacity instead of z-index... is that helpful?

$("#down").click(function(){
 $("#img1").css("opacity", 0.0);
$("#img2").css("opacity", 1.0);
  });

$("#up").click(function(){
$("#img2").css("opacity",0.0);
$("#img1").css("opacity", 1.0);
});

the js fiddle link is.. http://jsfiddle/6rwBR/ hopefully this helps

本文标签： javascriptHow to change zIndex of an element on click in jqueryStack Overflow