Here's the fiddle我使用unicode字符制作了棋盘。 我的问题是,当我拖动一块时,即使我的z-index为1,它也会消失。
.player {
z-index:1;
cursor:pointer;
}
main {
font-size:25px;
}
.boardRow {
border-left:3px solid #000;
clear:left;
}
.top {
border-top:1px solid #000;
}
.cell {
z-index:0;
float:left;
width:3em;
border-right:1px solid #000;
border-bottom:1px solid #000;
text-align:center;
vertical-align:middle;
/* Doesn't work */
}
.first {
border-left:1px solid #000;
}
这是html:
<main role="main" class="container">
<div class="boardRow">
<span class="top cell first"><span class="player">♜</span></span>
<span class="top cell"><span class="player">♞</span></span>
<span class="top cell"><span class="player">♝</span></span>
<span class="top cell"><span class="player">♛</span></span>
<span class="top cell"><span class="player">♚</span></span>
<span class="top cell"><span class="player">♝</span></span>
<span class="top cell"><span class="player">♞</span></span>
<span class="top cell"><span class="player">♜</span></span>
</div>
<div class="boardRow">
<span class="cell first"><span class="player">♟</span></span>
<span class="cell"><span class="player">♟</span></span>
<span class="cell"><span class="player">♟</span></span>
<span class="cell"><span class="player">♟</span></span>
<span class="cell"><span class="player">♟</span></span>
<span class="cell"><span class="player">♟</span></span>
<span class="cell"><span class="player">♟</span></span>
<span class="cell"><span class="player">♟</span></span>
</div>
<div class="boardRow">
<span class="cell first"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
</div>
<div class="boardRow">
<span class="cell first"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
</div>
<div class="boardRow">
<span class="cell first"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
</div>
<div class="boardRow">
<span class="cell first"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
<span class="cell"> </span>
</div>
<div class="boardRow">
<span class="cell first"><span class="player">♙</span></span>
<span class="cell"><span class="player">♙</span></span>
<span class="cell"><span class="player">♙</span></span>
<span class="cell"><span class="player">♙</span></span>
<span class="cell"><span class="player">♙</span></span>
<span class="cell"><span class="player">♙</span></span>
<span class="cell"><span class="player">♙</span></span>
<span class="cell"><span class="player">♙</span></span>
</div>
<div class="boardRow">
<span class="cell first"><span class="player">♖</span></span>
<span class="cell"><span class="player">♘</span></span>
<span class="cell"><span class="player">♗</span></span>
<span class="cell"><span class="player">♕</span></span>
<span class="cell"><span class="player">♔</span></span>
<span class="cell"><span class="player">♗</span></span>
<span class="cell"><span class="player">♘</span></span>
<span class="cell"><span class="player">♖</span></span>
</div>
</main>