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.
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.
Solution 2
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.
OTHER TIPS
z-index
is a style not a property of the DOM node, so it's
document.getElementById("divred").style.zIndex = "10";