How to use zindex in JavaScript

Question

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.

Answer 1

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

Answer 2

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