将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;对table-cell元素的影响是不确定的.

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鼠标上的图像.}