title: Put 2 images on top of each other
body: <p>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.</p>
  
  <p>But currently I'm struggling to position everything.
  I've managed to put 2 images over each other, but not on the correct position.</p>
  
  <p>Current situation: A table with pictures in the first row.
  This is the CSS added to the pictures:</p>
  
  <pre><code>&lt;td&gt;&lt;img src="bottom.jpg" style="z-index: 0; position: absolute"  /&gt;
      &lt;img src="top.png"    style="z-index: 1; position: absolute"/&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/wR0La.jpg" alt="Current situation"></p>
  
  <p>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.</p>
  
  <p>The solution should work for all the pictures in the table (a general CSS class for each of the pictures (top/bottom).</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT after Fabio's suggestion</strong></p>
  
  <p>It solved a part of the issue, but not entirely.
  This is the current situation with the exact code you suggested:</p>
  
  <p><img src="https://i.stack.imgur.com/RaTmh.jpg" alt="New situation"> </p>