javascript how to use zindex

Question

Hi ,

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;

not working even its not showed the error also

Also tell for jquery...

this is my snippet 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 is snippet not as perfect as i expect..i want to move my div center of the page..but it just moving my div bottom of the page

Answer 1

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

Answer 2

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 3

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

http://www.w3schools.com/jsref/prop_style_zindex.asp

Answer 4

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

Thanks Problem fixed

Answer 5

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

becouse:

document.getElementById('iframe_div1').style.display='block';

Must be:

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

//or

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