如何将图像放在其他图像的一部分上

Question

我试图将pawn的图像放在pawn的其他图像的一部分上，但是当我尝试这样做时，它会将棋子放在前一个棋子附近：

这是我想要拥有的内容：

HTML：

<td class="" row="0" col="0"><span>1</span>
<img class="soldiers" playernumber="1" soldiernumber="1" src="Resources/images/player_1.png">
<img class="soldiers" playernumber="1" soldiernumber="2" src="Resources/images/player_1.png">
<img class="soldiers" playernumber="1" soldiernumber="3" src="Resources/images/player_1.png">
<img class="soldiers" playernumber="1" soldiernumber="4" src="Resources/images/player_1.png">
<img class="soldiers" playernumber="2" soldiernumber="1" src="Resources/images/player_2.png">
<img class="soldiers" playernumber="2" soldiernumber="2" src="Resources/images/player_2.png">
<img class="soldiers" playernumber="2" soldiernumber="3" src="Resources/images/player_2.png">
<img class="soldiers" playernumber="2" soldiernumber="4" src="Resources/images/player_2.png">
</td>

CSS：

td {
    width: 80px;
    height: 80px;
    text-align: left;
    vertical-align: top;
    border: 1px solid black;
    position: relative;
}

.soldiers
{
    width:20px;
    height:20px;
}

td span {
    position: absolute;
    bottom: 0;
}

Answer 1

我准备了jsFiddle来证明你的意图。

$(function(){
    var s = 0;
    $('.soldiers').each(function(){
        $(this).css({'top':s,'left':s});
        s+=10;
    });
});

小提琴中发生的事情是我已经将position:absolute;添加到课堂上.soldiers 并为每个.soldiers元素增加（通过jQuery each（）方法）top和left的确定值（在本例中为10）。

如果你以后要移动棋子，你可能还需要与z-index合作为士兵进行图层定位