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.

Mixing jQuery and plain JS (for the same task) is not so good. — Felix Kling
– Felix Kling, Commented Aug 2, 2010 at 16:51

Reigel Gallarde · Accepted Answer · 2010-08-02 14:22:40Z

15

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

edited Aug 2, 2010 at 14:22

answered Aug 2, 2010 at 14:08

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pekka · Accepted Answer · 2010-08-02 14:03:24Z

9

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

answered Aug 2, 2010 at 14:03

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

1 Comment

Pekka Over a year ago

@Bharani what about position?

James Black · Accepted Answer · 2010-08-02 14:09:14Z

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

answered Aug 2, 2010 at 14:09

James Black

41.8k10 gold badges92 silver badges172 bronze badges

Comments

ajile · Accepted Answer · 2010-08-02 14:42:33Z

0

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

answered Aug 2, 2010 at 14:42

ajile

6861 gold badge11 silver badges18 bronze badges

1 Comment

Derek 朕會功夫 Over a year ago

No it is not. absolute is for position, not display. Please don't post wrong answer if you do not know much about the topic.

Reigel Gallarde · Accepted Answer · 2010-08-02 15:19:20Z

0

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

Thanks Problem fixed

edited Aug 2, 2010 at 15:19

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

answered Aug 2, 2010 at 14:40

Bharanikumar

25.8k51 gold badges135 silver badges203 bronze badges

Collectives™ on Stack Overflow

How to use zindex in JavaScript

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related