选择重叠的div在顶部

Question

我写了一个简单的代码，其中有一个主框，里面有两个较小的框。

我已经将较小方框的位置设置为绝对，以便根据其父对象设置它们的位置。

我想做的是把son2div放在前面，因为现在被sondiv 隐藏了

我尝试了z-index属性，但(正如我所预期的(我的元素位于parent元素之下，而不是位于小蓝框之下

#parent {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
margin-top: 200px;
margin-left: 200px;
}
#son2 {
position: absolute;
background-color: green;
width: 50px;
height: 50px;
margin-top: 20px;
}
#son {
position: absolute;
background-color: blue;
width: 50px;
height: 50px;
margin-top: 10px;
}

<div id="parent">
<div id="son2"></div>
<div id="son"></div>
</div>

Codepen上的演示：https://codepen.io/mattiasu96/pen/KbpyNQ

Answer 1

微小的变化(只需将z-index: 1;添加到son2(。顺便说一句，除非您也需要从自然位置更改其位置，否则您不希望为父对象设置position: absolute，否则请使用position: relative，使其正常渲染，但绝对位置的子对象仍按预期行为。

我已经从父级中删除了页边空白，这样你就不必为了查看div而在代码段中滚动，但如果你在最初的问题中需要，那也没什么区别。

#parent {
position: relative;
background-color: red;
width: 100px;
height: 100px;
}
#son2 {
position: absolute;
background-color: green;
width: 50px;
height: 50px;
margin-top: 20px;
z-index: 1;
}
#son {
position: absolute;
background-color: blue;
width: 50px;
height: 50px;
margin-top: 10px;
}

<div id="parent">
<div id="son2"></div>
<div id="son"></div>
</div>