将2张图片放在一起

Question

我目前正在制作一个类似于Cluedo的网站，人们可以怀疑某些人或宣布他们是无辜的。当一个人是无辜的时候，我想在他们的照片上放一个红色的叉。

但目前我正在努力定位一切。 我已经成功地将两张图片叠加在一起，但位置不正确。

当前情况：第一行有图片的表格。 这是添加到图片的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类(top/bottom) )。

谢谢！

Fabio建议后编辑

它解决了部分问题，但不是全部。以下是您建议的确切代码的当前情况:

- Matt

Answer 1

为了使用相对定位，您应该在图像周围添加一个额外的<div>。因为在表格单元格元素上使用position: relative;的效果是未定义的。

9.3.1 选择定位方案：'position' 属性

position:relative对于table-row-group、table-header-group、 table-footer-group、table-row、table-column-group、 table-column、table-cell和table-caption元素的影响是未定义的。

这里有个例子

<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图像。}

- Hashem Qolami

---

此外，在不同的情况下，如果您打算有很多div，您可能希望将display: inline;添加到div的样式中... - SanThee

Answer 2

首先，删除内联样式。如果可能的话，请为图像添加类，例如：

<td><img  class="bottomimg" src="bottom.jpg"  />
    <img  class="topimg" src="top.png" />
</td>

然后在CSS中

td{position:relative; z-index:0}
.bottomimg{position:absolute; top:0; left:0; z-index:1}
.topimg{position:absolute; top:0; left:0; z-index:2}

- Devin

---

我刚刚尝试了你的代码，但问题只是半解决。请查看原始帖子中的编辑以了解当前情况。 - Matt

@Matt FYI：OP 代表原帖作者，而不是帖子本身。 - Hashem Qolami

而且 td{position:relative;} 没有任何意义；请参阅我的答案。 - Hashem Qolami

糟糕，我的错。谢谢你告诉我 :-) - Matt