Tutorial :How to use zindex in JavaScript


What is the syntax for zindex?

I tried like this

document.getElementById('iframe_div1').style.zIndex =2000;  document.getElementById('iframe_div1').style.z-index =2000;  

It is not working, it doesn't even show an error.

This is my snippet. It is working fine in HTML, but I want to set this CSS property in jQuery or JavaScript. The top/position attributes are not working...

z-index:1200px; top:450px; position:absolute; right:300px;

document.getElementById('iframe_div1').style.display='block';  $("#iframe_div1").css("z-index", "500");  $("#iframe_div1").css("right", "300");  $("#iframe_div1").css("top", "450");  document.getElementById('iframe_div1').style.position = "absolute";  

This snippet is not as perfect as I expect. I want to move my div center of the page, but it just moving my div to the bottom of the page.


The former should work all right. Use a DOM inspector like Firebug's "inspect element" to find out whether maybe the value gets assigned, but doesn't have the desired effect.

In jQuery, it would be

 $("#iframe_div1").css("z-index", "2000");  


document.getElementById('iframe_div1').style.zIndex = "2000"; is fine. Just make sure it's position is absolute or relative. like this,

document.getElementById('iframe_div1').style.position = "relative"; // could also be absolute  


As this link mentions, zIndex only works if the element was positioned, so are you using something like position: absolute;?



...but it just moving my div bottom of the page...



Must be:

document.getElementById('iframe_div1').style.display='relation';    //or    document.getElementById('iframe_div1').style.display='absolute';  


$('#iframe_div1').css({          right : '300px',          top : '450px',          border : '1px solid red',          color : '#f00'  });  

Thanks Problem fixed

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »