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

Vote count:

0

So I'm making a checkers game using jquery and when I move a piece it is visible on every cell before and above the square that the piece starts on but goes under any square after. I am using a game board with a flex row wrap display like this:

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

the board contains 64 .cell divs and the .piece divs are placed inside those like so:

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

The z-index of the pieces are greater than the cells which are greater than the board but that doesn't seem to have any effect.

Is there an easy fix for this that I am missing? Perhaps something to do with flex display?

Should I move the piece div out of the cell and into the board div on move or perhaps keep all the pieces in the board div to begin with and assign their position dynamically?

Both of these options seem okay (more inclined towards the former) but I'm wondering why the z-index has no effect and if there is an attribute that I might be able to change to get the desired effect.

asked 1 min ago

spintron

12

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