Html 将图像层叠在一起会导致CSS网格无法正确换行到下一行

我试图用来分层图像的类在某种程度上导致我的CSS网格类

svgGrid

出现故障，并返回到第一列，而不更改到下一行

.svgGrid{
显示：网格；
网格模板列：重复（5，1fr）；
最小宽度：0px；
最小高度：0px；
栅隙：0px；
字体大小：0px；
背景色：#534e5b；
}
.imgContainer{
位置：相对位置；
}
.imgContainer.layer0{
位置：绝对位置；
排名：0；
左：0；
z指数：0；
}
.imgContainer.layer1{
位置：绝对位置；
排名：0；
左：0；
z指数：1；
}
img{
高度：自动；
宽度：自动；
最大宽度：100%；
}

---

绝对定位将元素从常规流程中移除。使用

位置保持第一层流动：相对，并使用
位置：绝对仅适用于下一层

这就是你要找的吗


.svgGrid{
显示：网格；
网格模板列：重复（5，1fr）；
最小宽度：0px；
最小高度：0px；
栅隙：0px；
字体大小：0px；
背景色：#534e5b；
}
.imgContainer{
位置：相对位置；
}
.imgContainer.layer0{
位置：相对位置；
排名：0；
左：0；
z指数：0；
}
.imgContainer.layer1{
位置：绝对位置；
排名：0；
左：0；
z指数：1；
}
img{
高度：自动；
宽度：自动；
最大宽度：100%；
}

是否可以进一步扩展到多个层？这意味着最后一层之前的每一层都是相对的还是只有第一层是相对的？是的，这几乎正是我想要的，谢谢！只要第一层相对定位，你就可以走了