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 does not work, it does not even show an error.

This is my fragment. It works fine in HTML, but I want to set this CSS property in jQuery or JavaScript. The top / position attributes do not work ...

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 piece is not as perfect as I expect. I want to move my center div of the page, but it just moves my div to the bottom of the page.

Answer 1

The first should work fine. Use a DOM inspector, such as Firebug, “check element” to find out if a value can be assigned, but does not have the desired effect.

In jQuery it will be

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

Answer 2

document.getElementById('iframe_div1').style.zIndex = "2000"; excellent. Just make sure its position is absolute or relative . eg,

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

Answer 3

As mentioned in this link, zIndex only works if the item has been placed, so you use 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, fixed the problem

Answer 5

... but it just moves my 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';