z-index 无效 div 在 jquery 移动中被覆盖

Question

所以我正在使用 jquery 制作西洋跳棋游戏，当我移动棋子时，它在棋子开始所在的正方形之前和上方的每个单元格上都可见，但在之后的任何正方形下方。我正在使用带有弹性行环绕显示的游戏板，如下所示：

.board{
   display: flex;
   flex-flow: row wrap;
   margin: 0 auto;
   z-index: 2;
}

棋盘包含 64 个 .cell divs 并且 .piece divs 被放置在这样的里面：

<div class="board">
 <cell>
  <piece>
 </cell>
 <cell>
 ...

棋子的z-index比棋盘大的格子大，但似乎没有任何效果。

有没有我遗漏的简单解决方法？也许与 flex 显示有关？

我是应该将棋子 div 移出格子并移动到棋盘 div 中，还是将所有棋子都留在棋盘 div 中开始并分配它们动态定位？

这两个选项看起来都不错（更倾向于前者）但我想知道为什么 z-index 没有效果，如果有一个属性我可以更改以获得所需的效果。

Answer 1

Z-index 属性在您使用任何位置属性之前不起作用。你必须先设置位置。

您可以在此处使用任何一个位置作为相对位置、固定位置或绝对位置，具体取决于您的预期输出。

.board{
       display: flex;
       flex-flow: row wrap;
       margin: 0 auto;
       z-index: 2;
       position: relative;
       position: fixed;
       position: absolute;
    }

z-index 无效 div 在 jquery 移动中被覆盖

z-index has no effect div gets covered on jquery move

html

css

jquery

z-index