Javascript Can'；将重叠的两个项目居中放置

我无法将重叠的两个项目居中放置。我想站在另一个div的中心，一个div叠加在另一个div之上。 问题是它们是重叠的，但它们并排存在

#playerOfTeam{
边框：2个黑色实心；
高度：400px；
宽度：400px；
显示器：flex；
证明内容：中心；
背景色：红色；
}
#横幅{
z指数：0；
宽度：100%；
背景颜色：蓝色；
}
#朗克区{
z指数：11；
宽度：100%；
/*左：50%*/
/*左边距：-20px*/
背景颜色：绿色；
}

---

使父容器

位置：相对

（启用

位置：绝对

工作）

使基础容器

位置：绝对

使用

z-index

将两个div堆叠在一起

请注意，

position:absolute

将div从正常的HTML流中去掉，因此像

width:100%

这样的内容不能以相同的方式使用

#playerOfTeam{
位置：相对位置；
边框：2个黑色实心；
高度：400px；
宽度：400px；
显示器：flex；
证明内容：中心；
背景色：红色；
}
#横幅{
z指数：1；
位置：绝对位置；
最高：25%；
左：0；
宽度：400px；
高度：200px；
背景色：rgba（0,0255,0.5）；/*使用0.5不透明度来出血颜色*/
}
#朗克区{
z指数：2；
位置：绝对位置；
最高：25%；
左：0；
宽度：400px；
高度：200px；
背景色：rgba（0255,0,0.3）；/*使用0.5不透明度出血颜色*/
}
#朗克区{
显示：网格；
放置项目：中心；
颜色：白色；
}

浅褐色/略带紫色是绿色/蓝色叠加的结果

为什么您认为它们相互重叠？您以前有其他代码这样做吗？目前，他们正在使用并排的defautl布局。您应该考虑使用

position:absolute

覆盖它们。