表格单元格中图像的固定位置 CSS

Question

我对表格单元格中的图像有一点问题。我有一个 3 行的表。在中间一行，我有一张图片（这是一个链接，所以没有背景）。我想在不改变单元格大小的情况下将第二张图片部分放在第一张图片上（如邮票）。它需要在单元格的角落。

查看我需要的这个例子：

.

我想避免绝对定位，因为页面上的表格很少。有些需要印章，有些不需要。

我用position:relative 尝试过这个，但它改变了单元格的大小，将图片放在第一个下面。

你能帮帮我吗？

Answer 1

我已经为你创建了这个fiddle。

图片 B 在图片 A 之上，图片 A 是可点击的，当然两者都在表格单元格中，就像您想要的那样。

我唯一没有解决的是position: absolute 我知道您不想使用它，但老实说，我看不到任何其他方法可以做到这一点。 您可以使用 position: fixed 但一旦用户向下滚动，表格将在图片下方消失，您会将这些图片放在整个页面的顶部。

希望对你有所帮助。干杯。

table, tr, th, td {
  border: 1px solid black;
  text-align: center;
}
tbody tr td {
  width: 500px;
  height: 350px; 
}
.footer td {
  border: 1px solid black;
  height: 10px;
  width: 10px;
}
.back {
  position: absolute;
  z-index: 0;
  width: 400px;
  margin: -130px 0 0 50px;
}
.front {
  position: absolute;
  z-index: 1;
  width: 150px;
  margin: 75px 0 0 352px;
}

<table>
<theader>
  <tr>
    <th colspan=2>HEADER</th>
  </tr>
  </theader>
  <tbody>
  <tr>
    <td colspan=2>
    <a href="#"><img class="back" src="http://www.w3schools.com/css/rock600x400.jpg"></a>
      <img class="front" src="http://www.w3schools.com/css/lights600x400.jpg">
    </td>
  </tr>
  </tbody>
  <tr class="footer">
    <td></td>
    <td></td>
  </tr>
</table>