How to manipulate z-index using javascript

Question

Suppose I have two divs :

<div id="divred"></div>
<div id="divgreen"></div>

Then I want to manipulate their z-index to bring the second div to front:

document.getElementById("divgreen").zIndex="2";

It will fail.

Some people told me that there is an excuse for this behavior, all objects must have positioning specified and there are multiple stacks so -10 in a top stack is still higher than 100 in a lower stack.

That did not help though. I want to know how to ensure that multiple html objects are in same stacking context so that I can play with z-index?

Take this jsfiddle: http://jsfiddle.net/4Lg8a/30/ Can you bring the red div to front without changing the initial positioning?

Here is the updated JSFiddle: http://jsfiddle.net/4Lg8a/45/embedded/

It works in Webkit, but not in FF28.

adeneo · Accepted Answer · 2014-03-19 21:38:13Z

3

z-index is a style not a property of the DOM node, so it's

document.getElementById("divred").style.zIndex = "10";

FIDDLE

answered Mar 19, 2014 at 21:38

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

1 Comment

Spero Over a year ago

That was a silly mistake. I have updated the code with the full design. It works in Webkit, but not in Gecko (FF28). Can you check?

Brad Larson · Accepted Answer · 2014-08-29 16:13:06Z

0

I came up with the solution long ago but forgot to post.

Any 3D transformation invalidates z-index. So I need to use 3D positioning (translateZ) to bring the div to front.

edited Aug 29, 2014 at 16:13

Brad Larson

170k45 gold badges401 silver badges574 bronze badges

answered Aug 29, 2014 at 15:43

Spero

2883 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to manipulate z-index using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related