是否有z-index堆叠上下文的解决方法？

Question

Sample of the problem

让3个div。

<div id="div1"><div id="div2"></div></div>
<div id="div3" />

如果div2的z-index比div3高，但div1的z-index低于div3，则div2将显示在div3之下。

有没有办法让div2高于div3而不改变div1的z-index或使div2成为div1 / div3的兄弟？

Answer 1

不幸的是没有。只要div1的z-index高于div3，div1中的所有内容都将出现在div3之上。

Answer 2

使用上面给出的html：

#div1{
    width: 200px;
    height: 200px;
    z-index: 30;
    border: 1px solid black;
}
#div2{
    width: 150px;
    height: 150px;
    z-index: 35;
    border: 1px solid black;
    position: relative;
    top: 70px;
    left: 10px;
    background-color: red;
}
#div3{
    width: 200px;
    height: 200px;
    z-index: 32;
    border: 1px solid black;
    background-color: lime;
    position: relative;
    top: -30px;
    left: 40px;
}

这似乎有效，至少在FF和IE 8上