javascript - 如何使用 javascript 操作 z-index

Question

假设我有两个 div:

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

然后我想操纵他们的 z-index 将第二个 div 放在前面:

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

它会失败。

有些人告诉我这种行为是有借口的，所有对象都必须指定位置并且有多个堆栈，因此顶部堆栈中的 -10 仍然高于较低堆栈中的 100。

但这并没有帮助。我想知道如何确保多个 html 对象处于相同的堆叠上下文中，以便我可以使用 z-index？

使用这个 jsfiddle: http://jsfiddle.net/4Lg8a/30/能否在不改变初始位置的情况下将红色 div 置于最前面？

这是更新后的 JSFiddle:http://jsfiddle.net/4Lg8a/45/embedded/

它在 Webkit 中有效，但在 FF28 中无效。

Answer 1

z-index 是一种样式，不是 DOM 节点的属性，所以它是

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

FIDDLE