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.

Answer 1

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.

Answer 2

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

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

FIDDLE