Put 2 images on top of each other

Question

I'm currently making a Cluedo-esque style of website where people can suspect people or declare them innocent. When I person is innocent, I want to put a red cross over their pictures.

But currently I'm struggling to position everything. I've managed to put 2 images over each other, but not on the correct position.

Current situation: A table with pictures in the first row. This is the CSS added to the pictures:

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

How can I the position of both of my images? Removing the "position: absolute" doesn't work, so how can I fix this and still keep both of the pictures in the table cell.

The solution should work for all the pictures in the table (a general CSS class for each of the pictures (top/bottom).

Thanks!

EDIT after Fabio's suggestion

It solved a part of the issue, but not entirely. This is the current situation with the exact code you suggested:

Answer 1

You should wrap the images by an additional <div> in order to use relative positioning. Because the effect of position: relative; on table-cell elements is undefined.

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>

Then you could simply remove the .top image from document normal flow an place that over the other one as follows:

CSS

.img-container { position: relative; }

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

---

^{PS: I've added a transition of opacity property in the online demo to hide .top images on mouse over.}