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

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

这就是我想要的：

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>

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;
}

我已经准备好了一份报告来证明你的意图

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

在小提琴中发生的是我添加了

位置：绝对给全班，士兵们
并（通过jQuery each（）方法）将
top
和
left
的确定值（在本例中为10）增加到每个.documents元素

如果以后要移动碎片，您可能还需要使用
z-index
为士兵进行图层定位
您希望使用.solutional类的绝对定位