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

Question

我有一个带有图像网格的简单HTML表格。但现在我希望一个单元能够包含多个分层图像，因为其中一些是部分透明的。制作所有图像position: absolute会使整个表格合并为一个正方形 这就是我现在拥有的结构;在这个例子中，石头图像应该在现在（错误地）在它们上面的沙子图像上。 （并且硬币图像应该在石像上）

＆＃13;

＆＃13;

.field {
  border: none;
  border-spacing: 0px;
}

.field tr, .field td {
  border: none;
  padding: 0px;
  vertical-align: top;
}

.field img {
  display: block;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

＆＃13;

<table class="field">
  <tr>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
      <img src="https://image.ibb.co/eFMUiT/coin.png">
    </td>
  </tr>
  <tr>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

这个问题Layering images inside a table-cell类似，但并不完全相同，并且没有为此问题获得任何满意的答案。

澄清： 如果我只是将图像的封闭元素设置为position: relative，将图像设置为position: absolute，则所有图像都会显示在屏幕的左上角。我有一个包含多个单元格的网格，每个单元格可能有多个分层图像！

Answer 1

上一个答案，在表格单元格上设置position: relative;是完全正确的。

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

你还需要给表格单元格大小：

width: 32px;
height: 32px;

完整示例：

＆＃13;

＆＃13;

.field {
  border: none;
  border-spacing: 0px;
}

.field tr, .field td {
  border: none;
  padding: 0px;
  vertical-align: top;
  position: relative;
  width: 32px;
  height: 32px;
}

.field img {
  position: absolute;
  display: block;
  width: 32px;
  height: 32px;
}

＆＃13;

<table class="field">
  <tr>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
      <img src="https://image.ibb.co/eFMUiT/coin.png">
    </td>
  </tr>
  <tr>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

table td {
  position:relative;
}

.absolute-img {
  position: absolute;
  top: 73px;
  left: 50px;
}

<table>
  <tr>
    <td>
      <img src="https://picsum.photos/200/300">
    </td>
    <td>
      <img src="https://picsum.photos/200/300">
      <img src="https://picsum.photos/200/300">
    </td>
    <td>
      <img src="https://picsum.photos/200/300" class="absolute-img">
      <img src="https://picsum.photos/200/300">
      <img src="https://picsum.photos/200/300">
    </td>
  </tr>
</table>  

Answer 3

通过告诉浏览器大小元素必须放在正确的位置。

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

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

将td元素设置为position：relative
将img元素设置为绝对位置。

它将绝对定​​位到你相对的td元素。

将img元素设置为top: 0px; bottom 0px;

＆＃13;

＆＃13;

.field {
  border: none;
  border-spacing: 0px;
}

.field tr, .field td {
  border: none;
  padding: 0px;
  vertical-align: top;  
}

.field td {
  position: relative;
  width: 32px;
}

.field tr {
   height: 32px;
   
}
.field img {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

＆＃13;

<table class="field">
  <tr>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
      <img src="https://image.ibb.co/eFMUiT/coin.png">
    </td>
  </tr>
  <tr>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

因为你知道img有多大，所以将它们各自的高度和宽度设置为td，然后在imgs上将它们置于绝对位置以将它们从流中取出，位置：相对于td，这样imgs对它们是有效的，并且不要出去。

＆＃13;

＆＃13;

.field {
  border: none;
  border-spacing: 0px;
}

.field tr,
.field td {
  border: none;
  padding: 0px;
  vertical-align: top;
}

.field td {
  width: 32px;
  height: 32px;
  position: relative;
}

.field img {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

＆＃13;

<table class="field">
  <tr>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
      <img src="https://image.ibb.co/eFMUiT/coin.png">
    </td>
  </tr>
  <tr>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
    </td>
    <td>
      <img src="https://image.ibb.co/hTXDA8/land.png">
      <img src="https://image.ibb.co/hgT9iT/rock_1.png">
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;