Html CSS网格移动项而不是重叠的z索引

我正在使用HTML5和CSS网格创建一个基于精灵的游戏。 我为不同的元素（背景和前景）设置了不同的z索引

期望： 我想象多个元素可以占据相同的网格空间，但是很明显，它们被移动了，忽略了z索引

结果：更改前景元素的网格区域会改变其余项目的顺序，而不是重叠它们

CSS:

---

在下面使用绝对位置的初始快速和肮脏方式–但刚刚深入了解了这一点，您似乎可以通过使用自定义列和行名称和

网格模板区域

并使用

网格区域

定位它们来实现网格单元的重叠

.container{
高度：500px；
宽度：500px；
位置：相对位置；
显示：网格；
网格间距：5px；
网格模板列：重复（5,20%）；
网格模板行：重复（5,20%）；
网格模板区域：“r1c1 r1c2 r1c3 r1c4 r1c5”
“r2c1 r2c2 r2c3 r2c4 r2c5”
“r3c1 r3c2 r3c3 r3c4 r3c5”
“r4c1 r4c2 r4c3 r4c4 r4c5”
“r5c1 r5c2 r5c3 r5c4 r5c5”；
}
.项目{
背景：#eee；
填充：.25em；
z指数：0；
}
#雪碧{
网格面积：r2c3；
背景：#ccc；
z指数：5；
不透明度：.5；
}
/*定位重叠单元，使网格流保持完整*/
/*您还需要指定所有其他单元格类*/
.r2c3{
网格面积：r2c3；
}

(传说中的)精灵
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

元素在网格中的位置是通过编辑样式生成的：

{gridColumn:${this.state.hero.c}，gridRow:${this.state.hero.r}，}

您是否需要代码的其余部分，还是需要一把小提琴？为什么精灵的位置有时会设置在网格之外？嗨，保罗，我设法用：`#sprite{z-index:2；position:absolute；}`来拯救它，谢谢你的建议！

#container {
    position: relative;
    height: 500px;
    width: 500px;
    display: grid;
    grid-gap: 1px;
    grid-template-columns: repeat(5, 20%);
    grid-template-rows: repeat(5, 20%);
}

.item {
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 1600%;
    image-rendering: pixelated;
}

@keyframes walk {
    100% { background-position: -462px; }
}

#sprite {
    z-index: 2;
    background-color: transparent;
    height: 100px;
    width: 100px;
    background: url(./../assets/thief.png) 0px 0px;
    background-size: 1200%;
    image-rendering: pixelated;
    animation: walk 0.5s steps(5) infinite;
}