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.

---

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

---

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

---

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

---

...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';

---

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

Thanks Problem fixed