css - z-index が高い親兄弟の前に子をどのように配置しますか?

Question

z-index が高い親兄弟の前に子をどのように配置しますか?

グリーンの前にピンクのボックスを出現させたい。

http://jsfiddle.net/Tim86/YRTxt/

<style>
#wrapper{
    position:relative;
    width:400px;
}
#red, #green{
    height:200px;
    width:400px;
}
#red{
    background-color:red;
    position:relative;
    z-index:10;
}
#pink{
    background-color:pink;
    height:250px;
    width:150px;
    top:50px;
    right:20px;
    position:absolute;
    z-index:40;
}
#green{
    opacity:0.8;
    background-color:green;
    position:relative;
    z-index:20;
    top:-50px;
}
</style>

<div id="wrapper">
    <div id="red">
        <div id="pink">
        </div>
    </div>
    <div id="green">

    </div>
</div>
​

Answer 1

position:relative;から削除する必要があり、#red完了です。

デモ