Javascript 如何使用z-index来模拟芯片通过connect-four板掉落，从而获得3d效果？

我正在做一个连接四的游戏，现在我可以把芯片放到合适的位置，也可以从红色芯片换成黄色芯片。然而，当你放下芯片时，它不会进入电路板。它是在板的外面分层的。我想让掉落的芯片落在每个插槽内的深蓝色圆圈上，然后落在插槽本身下面。所以它看起来很逼真，很立体

我想我可以用z-index来做这个，但是我有两个问题。第一，当我将div插槽设置为z索引3时，即使下降的芯片的z索引为2；芯片还是掉在插槽上？第二，即使这样做有效，每个插槽中的深蓝色圆圈现在也会被隐藏，因为div具有更高的z索引，它们需要相同，才能使两个插槽都可见。但是如果它们是相同的，芯片就不能落在电路板上

有什么办法可以达到这个效果吗

//获取电路板上的所有插槽位置
const slots=document.queryselectoral（'.board div'）；
让player='p1'；
让董事会=[
0, 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, 26, 27,
28, 29, 30, 31, 32, 33, 34,
35, 36, 37, 38, 39, 40, 41,
]
//为每个插槽分配一个类以表示其位置
for（设i=0；i=0；i--）{
如果（列[i]！='p1'| |列[i]！='p2'）{
棋盘[第[i]]=玩家；
插槽[列[i]].classList.add（播放器）；
开关播放器（播放器）；
打破
}	
}
功能开关播放器（currentPlayer）{
如果（当前播放器=='p1'）播放器='p2'；
如果（currentPlayer=='p2'）player='p1'，则为else；
}
}
}

/**{
轮廓：1px纯红；
}*/
*，*：之前，*：之后{
框大小：继承；
}
html{
框大小：边框框；
}
html，正文{
保证金：0；
填充：0；
背景色：#E5E8；
}
身体{
显示器：flex；
证明内容：中心；
最小高度：100vh；
}
.纸板包装{
填充顶部：100px；
显示器：flex；
证明内容：中心；
页边距：自动0自动；/*询问为什么需要此页边距*/
位置：相对位置；
溢出：隐藏；
}
.董事会{
显示器：flex；
柔性包装：包装；
最大宽度：706px；
背景色：#00c；
填充：3倍；
}
.董事局分区{
宽度：100px；
高度：100px；
背景颜色：蓝色；
边框：3px实心#00c；
位置：相对位置；
z指数：3；
}
.董事局分区{
显示：内联块；
宽度：80px；
高度：80px；
边界半径：50%；
背景色：#00c；
位置：绝对位置；
左：0；
排名：0；
右：0；
底部：0；
保证金：自动；
盒影：插图0px 0px 13px#0606aa；
}
.电路板.芯片{
显示：块；
位置：绝对位置；
背景色：透明；
排名：0；
左：0；
右：0；
高度：100px；
}
奇普：之后{
内容：“；
宽度：80px；
高度：80px；
边界半径：50%；
背景色：红色；
位置：绝对位置；
左：3px；
排名：0；
不透明度：0；
过渡：所有。5s轻松；
}
奇普：以前{
内容：“；
宽度：50px；
高度：50px；
边界半径：50%；
背景色：红色；
位置：绝对位置；
左：18px；
顶部：15px；
z指数：1；
盒影：插入0px 0px 20px#cc0000；
不透明度：0；
过渡：所有。5s轻松；
}
.board div:n类型（7n+1）：悬停~.chip:after{transform:translateX（10px）；不透明度：1；}
.board div:n类型（7n+1）：悬停~.chip:before{transform:translateX（10px）；不透明度：1；}
.board div:n类型（7n+2）：悬停~.chip:after{transform:translateX（110px）；不透明度：1；}
.board div:n类型（7n+2）：悬停~.chip:before{transform:translateX（110px）；不透明度：1；}
.board div:n类型（7n+3）：悬停~.chip:after{transform:translateX（210px）；不透明度：1；}
.board div:n类型（7n+3）：悬停~.chip:before{transform:translateX（210px）；不透明度：1；}
.board div:n类型（7n+4）：悬停~.chip:after{transform:translateX（310px）；不透明度：1；}
.board div:n类型（7n+4）：悬停~.chip:before{transform:translateX（310px）；不透明度：1；}
.board div:n类型（7n+5）：悬停~.chip:after{transform:translateX（410px）；不透明度：1；}
.board div:n类型（7n+5）：悬停~.chip:before{transform:translateX（410px）；不透明度：1；}
.board div:n类型（7n+6）：悬停~.chip:after{transform:translateX（510px）；不透明度：1；}
.board div:n类型（7n+6）：悬停~.chip:before{transform:translateX（510px）；不透明度：1；}
.board div:n类型（7n+7）：悬停~.chip:after{transform:translateX（610px）；不透明度：1；}
.board div:n类型（7n+7）：悬停~.chip:before{transform:translateX（610px）；不透明度：1；}
.p1：之后{
内容：“；
显示：内联块；
宽度：80px；
高度：80px；
边界半径：50%；
背景色：红色；
位置：绝对位置；
左：0；
排名：0；
右：0；
底部：0；
保证金：自动；
z指数：1；
动画名称：drop；
动画填充模式：正向；
动画持续时间：.5s；
动画计时功能：轻松自如；
}
.p1:之前{
内容：“；
宽度：50px；
高度：50px；
边界半径：50%；
背景色：红色；
位置：绝对位置；
左：0；
排名：0；
右：0；
底部：0；
保证金：自动；
z指数：2；
盒影：插入0px 0px 20px#cc0000；
动画名称：drop；
动画填充模式：正向；
动画杜拉蒂