如何使用javascript操作z索引

假设我有两个div：

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

它将失败

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

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

拿这个例子来说： 你能在不改变初始位置的情况下将红色div带到前面吗

以下是更新的JSFIDLE：

---

它在Webkit中工作，但在FF28中不起作用。

z-index

是一种样式，而不是DOM节点的属性，因此它是

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

---

我很久以前就提出了解决方案，但忘了发布

---

任何三维变换都会使z索引无效。所以我需要使用3D定位（translateZ）将div带到前面。

这是一个愚蠢的错误。我已经用完整的设计更新了代码。它在Webkit中工作，但在Gecko（FF28）中不起作用。你能查一下吗？

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