Is there a workaround for z-index stacking contexts?

Question

Sample of the problem

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 any way to have div2 be above div3 without changing the z-index of div1 or making div2 a sibling of div1/div3?

Answer 1

Unfortunately no. As long as and div1 has a higher z-index than div3, everything in div1 will appear above div3.

Answer 2

Using the html you gave 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