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

Tim*_*Tim 1 css z-index

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

我想把粉红色的盒子放在果岭前面.

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>
?
Run Code Online (Sandbox Code Playgroud)

小智 5

您需要删除position:relative;#red它完成.

演示

  • 谢谢,太棒了!一个简短的解释是很棒的. (2认同)