Css 如何将孩子放在z指数较高的父母兄弟姐妹面前？

如何将孩子放在z指数较高的父母兄弟姐妹面前

我想把粉红色的盒子放在绿色的前面

#包装纸{
位置：相对位置；
宽度：400px；
}
#红色、绿色{
高度：200px；
宽度：400px；
}
#红色的{
背景色：红色；
位置：相对位置；
z指数：10；
}
#粉红的{
背景颜色：粉红色；
高度：250px；
宽度：150px；
顶部：50px；
右：20px；
位置：绝对位置；
z指数：40；
}
#绿色的{
不透明度：0.8；
背景颜色：绿色；
位置：相对位置；
z指数：20；
顶部：-50px；
}
​

您需要删除

位置：相对从
#red
开始，就完成了

您需要删除
位置：相对从
#red
开始，就完成了

谢谢，太好了！一个简短的解释就太棒了。我面临着一个类似的问题，但我无法从元素中删除相对位置。还有其他选择吗？谢谢，太好了！一个简短的解释就太棒了。我面临着一个类似的问题，但我无法从元素中删除相对位置。还有什么其他选择？
<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>
​