修复表格单元格中图像的CSS位置

Question

我对表格单元格中的图像有一点问题。我有一个3行的表。在中间一行，我有一张图片（这是一个链接，所以没有背景）。我想在第一张照片上放一张第二张照片（就像一张印章），而不改变细胞的大小。它需要在细胞的角落里。

请参阅我需要的示例：

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

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

你能帮助我吗？

Answer 1

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

图像B位于图像A的顶部，图像A是可点击的，两者当然都在表格单元格中，完全符合您的要求。

我唯一没有解决的是position: absolute 我知道你不想使用它，但老实说，我没有看到任何其他方法。 您可以使用position：fixed但是只要用户向下滚动，表格就会在图片下方消失，并且您将在整个页面上显示这些图片。

我希望能帮到你。欢呼声。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;