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中，還是應該將所有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;
    }