CODEWITHSUNDEEP
javascriptjquery
Bharanikumar
Bharanikumar

Reputation: 25733

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.

Upvotes: 7

Views: 55877

Answers (5)

Bharanikumar
Bharanikumar

Reputation: 25733

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

Thanks Problem fixed

Upvotes: 0

ajile
ajile

Reputation: 686

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

Upvotes: 0

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

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

Upvotes: 15

James Black
James Black

Reputation: 41858

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

Upvotes: 3

Pekka
Pekka

Reputation: 449485

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

Upvotes: 9

Related Questions