Is there a workaround for z-index stacking contexts?

Question

Problem example

Let there be 3 divs.

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

If div2 has a higher z index than div3, but div1 has a lower z-index than div3, then div2 will be shown below div3.

Is there a way to have div2 over div3 without changing the z-index of div1 or make div2 the brother of div1 / div3?

Answer 1

Using the html you specified above:

#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;
}

This seems to work, at least on FF and IE 8

Answer 2

Unfortunately no. While div1 has a higher z-index than div3, everything in div1 will appear above div3.