你如何把孩子放在一个z指数较高的父母兄弟面前？

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并完成。

Demo