Html 如何将父div放置在其子div的顶部？

我有一个container div，它有

背景色：红色。这个容器大约有12个子容器，最后一个子容器的背景颜色为蓝色。我试图用
背景色：蓝色
将容器移动到孩子的顶部。我对容器使用了更高的z索引，但它仍然落后于子容器


.no1{
宽度：800px；
高度：300px；
背景色：红色；
位置：相对位置；
z指数：999；
}
.no2{
位置：相对位置；
宽度：500px；
高度：200px；
背景颜色：蓝色；
z指数：1；
}
.第三{
位置：相对位置；
}
.四号{
位置：相对位置；
}
.五号{
位置：相对位置；
}
您可以从父项中删除z索引，并给子项一个负z索引


.no1{
宽度：800px；
高度：300px；
背景色：红色；
位置：相对位置；
}
.no2{
位置：相对位置；
宽度：500px；
高度：200px；
背景颜色：蓝色；
z指数：-1
}
.第三{
位置：相对位置；
}
.四号{
位置：相对位置；
}
.五号{
位置：相对位置；
}
若要将子div与父div重叠，请删除给定给容器（父div）的z索引，并将负z索引值添加到子div

我已经更新了你的小提琴。希望这能解决问题


.no1{
宽度：800px；
高度：300px；
背景色：红色；
位置：相对位置；
}
.no2{
位置：相对位置；
宽度：500px；
高度：200px；
背景颜色：蓝色；
z指数：-1；
}
.第三{
位置：相对位置；
}
.四号{
位置：相对位置；
}
.五号{
位置：相对位置；
}

上级部门
儿童部
您可以为子div添加
z-index:-1