Html 如何在div中重叠图像

我想做一个21点游戏，我想叠牌。下面的代码应该可以做到这一点，但我只得到了一列卡片

我看了另一个类似的问题，但我不明白我做错了什么

提前谢谢

html，
身体{
边际：0px；
背景色：rgb（0,46,0）；
颜色：白色；
}
.头衔{
文本对齐：居中；
背景色：黑色；
颜色：白色；
填充：20px；
字体大小：25px；
}
.卡片{
位置：相对位置；
宽度：150px；
左：100px；
左边距：-75px；
}

21点
21点
新游戏
打
站
球员0分

像这样试试

html，
身体{
边际：0px；
背景色：rgb（0,46,0）；
颜色：白色；
}
.头衔{
文本对齐：居中；
背景色：黑色；
颜色：白色；
填充：20px；
字体大小：25px；
}
#玩家卡{
位置：相对位置；
宽度：150px；
左：100px；
左边距：-75px；
}
img.card{
位置：绝对位置；
左：0px；
顶部：0px；
}
img.card{
位置：绝对位置；
左：0px；
顶部：0px；
}
模拟卡：第n名儿童（2）{
转换：翻译（0,50%）；
} 
假卡：第n名儿童（3）{
转换：翻译（0,100%）；
} 
假卡：第n名儿童（4）{
转换：翻译（0，150%）；
}

21点
21点
新游戏
打
站
球员0分

图像现在是重叠的，但我想得到的是下一张图像覆盖了下面图像的一半，依此类推，而不是得到一堆图像。可能吗？我编辑了我的帖子。你想要那个结果吗？