Currently dragging z-index set in CSS is not applying to 3D pieces cause piece's z-index set as inline style overwrites it. As a result dragging piece might be displayed under other pieces.
This could be fixed by adding !important rule to dragging z-index in CSS.
Naturally, it's not the best practice to rely on !important rule, but since z-index for 3D pieces is set as an inline style that is the only option to override it. Other option could be reusing inline styles, i.e., setting dragging z-index on drag start and setting back normal z-index on drag end, but this looks less pragmatic since the same dragging z-index would be defined in both css and js in this case.
Also small improvement related to the z-index values has been made. Currently each square gives a unique index value to a piece so a very wide range of indices (3-66) is reserved because of that. However having different indices within one rank doesn't seem to make any sense cause 3D pieces only overflow square's top edge and not left/right edges. So one index per rank seems to be more than enough and it allows to significantly reduce the range of indices (3-10). As a result there will be less probability to run into some issues with displaying other things on different layers correctly.
Dragging piece's z-index value has been increased to 11. Currently it's 10 which would display a dragging piece under most of the other pieces even with the !important.
I've prepared a PR in lila (ornicar/lila#9865) which also applies !important rule for dragging piece's z-index. Since it's value is way higher than in chessground's CSS (204) it doesn't depend on this PR and could be merged separately.
Currently dragging z-index set in CSS is not applying to 3D pieces cause piece's z-index set as inline style overwrites it. As a result dragging piece might be displayed under other pieces.
https://user-images.githubusercontent.com/66057996/134406773-54b0be2c-8605-4fb8-9c22-c374ec644217.mp4
This could be fixed by adding !important rule to dragging z-index in CSS.
Naturally, it's not the best practice to rely on !important rule, but since z-index for 3D pieces is set as an inline style that is the only option to override it. Other option could be reusing inline styles, i.e., setting dragging z-index on drag start and setting back normal z-index on drag end, but this looks less pragmatic since the same dragging z-index would be defined in both css and js in this case.
Also small improvement related to the z-index values has been made. Currently each square gives a unique index value to a piece so a very wide range of indices (3-66) is reserved because of that. However having different indices within one rank doesn't seem to make any sense cause 3D pieces only overflow square's top edge and not left/right edges. So one index per rank seems to be more than enough and it allows to significantly reduce the range of indices (3-10). As a result there will be less probability to run into some issues with displaying other things on different layers correctly.
Dragging piece's z-index value has been increased to 11. Currently it's 10 which would display a dragging piece under most of the other pieces even with the !important.
I've prepared a PR in lila (ornicar/lila#9865) which also applies !important rule for dragging piece's z-index. Since it's value is way higher than in chessground's CSS (204) it doesn't depend on this PR and could be merged separately.