Html 选择位于顶部的重叠div

我编写了一个简单的代码，其中一个主框包含两个较小的框

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

我想做的是把Son2Div带到前面，因为现在被sondiv隐藏了

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

母公司{ 位置：绝对位置； 背景色：红色； 宽度：100px； 高度：100px； 利润上限：200px； 左边距：200px； } 儿子2{ 位置：绝对位置； 背景颜色：绿色； 宽度：50px； 高度：50px； 边缘顶部：20px； } 儿子{ 位置：绝对位置； 背景颜色：蓝色； 宽度：50px； 高度：50px； 边缘顶部：10px； } 微小变化只需添加z指数：1；给儿子2。 顺便说一句，您不希望为父对象设置position:absolute，除非您也需要将其位置从自然位置更改为其他位置，否则请使用position:relative以使其正常渲染，但绝对位置的子对象仍按预期的方式工作

我已经从父级删除了边距，这样您就不必为了查看div而在代码段中滚动，但是如果您在原始问题中需要它，则没有区别

母公司{ 位置：相对位置； 背景色：红色； 宽度：100px； 高度：100px； } 儿子2{ 位置：绝对位置； 背景颜色：绿色； 宽度：50px； 高度：50px； 边缘顶部：20px； z指数：1； } 儿子{ 位置：绝对位置； 背景颜色：蓝色； 宽度：50px； 高度：50px； 边缘顶部：10px； }

---

z-index:0到父级，然后您可以在子级上玩z-index，就像您想要的那样，它们不会在下面parent@TemaniAfif它起作用了！但是为什么我必须将父级设置为z-index:0？我已经阅读了这里的解释，但我不明白为什么现在它会像你建议的那样工作。z index:0将创建一个堆叠上下文，并将强制所有子级都属于其中，永远不会离开。勾选此项：它与您想要的相反，但它解释了堆叠上下文问题。。另一个：