z-index没有效果div被jquery移动覆盖

Question

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

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

该主板包含64个.cell div，.piece div放在那些内容中：

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

这些碎片的z-index大于大于纸板的细胞，但似乎没有任何效果。

我是否有一个容易解决的问题，我错过了？可能与柔性显示有关吗？

我是否应该将单元格从单元格中移出并移动到单元格div中，或者可以将板条div中的所有部分保持开始并动态分配它们的位置？

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

Answer 1

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

你可以在这里使用任何一个位置作为相对或固定或绝对取决于你的预期输出。

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