将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

     

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

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

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}