Javascript 在一个html表格单元格中分层多个图像

我有一个简单的HTML表格和一个图像网格。但现在我希望一个单元能够包含多层图像，因为其中一些部分是透明的。使所有图像

position:absolute

使整个桌子合并成一个正方形。
这就是我现在的结构；在本例中，石头图像应该位于现在（错误地）位于其上方的沙子图像上。（硬币图像应位于石头图像上）

.field{
边界：无；
边界间距：0px；
}
.field tr、.field td{
边界：无；
填充：0px；
垂直对齐：顶部；
}
.现场img{
显示：块；
宽度：32px；
高度：32px；
图像渲染：像素化；
图像渲染：-moz清晰的边缘；
图像渲染：清晰的边缘；
}

---

在td元素中使用相对位置可以帮助您将图像设置为绝对位置

表td{
位置：相对位置；
}
.绝对img{
位置：绝对位置；
顶部：73px；
左：50px；
}

---

通过告诉浏览器元素必须有多大，可以将东西放在正确的位置

定义tr元素上32像素的高度。
定义td元素上32像素的宽度

我们现在有了正确高度的行和正确宽度的框

将td元素设置为位置：相对
将img元素设置为绝对位置

它将绝对定位到您相对创建的td元素

将img元素设置为

top:0px；底部0px


.field{
边界：无；
边界间距：0px；
}
.field tr、.field td{
边界：无；
填充：0px；
垂直对齐：顶部；
}
.外地运输署{
位置：相对位置；
宽度：32px；
}
.field tr{
高度：32px；
}
.现场img{
显示：块；
位置：绝对位置；
顶部：0px；
左：0px；
图像渲染：像素化；
图像渲染：-moz清晰的边缘；
图像渲染：清晰的边缘；
}
由于您知道IMG有多大，请将其各自的高度和宽度设置为td，然后在IMG上放置绝对位置，将其从流量中取出，位置：td上的相对位置，以便IMG与它们相关，并且不要外出


.field{
边界：无；
边界间距：0px；
}
field tr，
.外地运输署{
边界：无；
填充：0px；
垂直对齐：顶部；
}
.外地运输署{
宽度：32px；
高度：32px；
位置：相对位置；
}
.现场img{
位置：绝对位置；
显示：块；
图像渲染：像素化；
图像渲染：-moz清晰的边缘；
图像渲染：清晰的边缘；
}
上一个答案，设置
位置：相对完全正确

例如，问题是当您设置
position:absolute在元素上，它不占用空间。因此，在没有其他内容的情况下，表格单元格将全部折叠为0大小，并且图像看起来是堆叠的，因为它们都相对定位到相同的（0，0）原点

您还需要指定表格单元格的大小：

width: 32px;
height: 32px;

完整示例：


.field{
边界：无；
边界间距：0px；
}
.field tr、.field td{
边界：无；
填充：0px；
垂直对齐：顶部；
位置：相对位置；
宽度：32px；
高度：32px；
}
.现场img{
位置：绝对位置；
显示：块；
宽度：32px；
高度：32px；
}

我的表格中有许多图像，它们不应该被偏移，而是直接在每个单元格中彼此重叠。如果我将此应用于表中的所有图像，它们都会合并到页面左上角的一个图像中