html - 将2张图片放在一起

Question

我目前正在制作一个 Cluedo 风格的网站，人们可以在其中怀疑他人或宣布他们无辜。 当我这个人是无辜的时候，我想在他们的照片上打个红叉。

但目前我正在努力定位所有内容。 我已经设法将 2 张图像放在一起，但位置不正确。

现状:第一行有图片的表格。 这是添加到图片的 CSS:

<td><img src="bottom.jpg" style="z-index: 0; position: absolute"  />
    <img src="top.png"    style="z-index: 1; position: absolute"/>
</td>

如何确定我的两张图片的位置？ 删除“position: absolute”不起作用，那么如何解决这个问题并仍然将两张图片保留在表格单元格中。

该解决方案应该适用于表格中的所有图片(每张图片(顶部/底部)的通用 CSS 类)。

谢谢!

根据 Fabio 的建议进行编辑

它解决了部分问题，但没有完全解决。 这是您建议的确切代码的当前情况:

Answer 1

你应该用额外的 <div> 包裹图像为了使用相对定位。因为position: relative;的效果表格单元格元素未定义。

9.3.1 Choosing a positioning scheme: 'position' property

The effect of position:relative on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

EXAMPLE HERE

<td>
  <div class="img-container">
    <img class="top" src="http://lorempixel.com/200/150" alt="">
    <img class="bottom" src="http://placehold.it/200x150/fe0" alt="">
  </div>
</td>

然后你可以简单地删除 .top来自文档的图像正常流过另一个位置，如下所示:

CSS

.img-container { position: relative; }

.img-container .top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

---

^{PS:我添加了 opacity 的转换隐藏在线演示中的属性.top鼠标悬停在图像上。}