max-height wird überschritten

[Thorsten Legat]

Hallo!

Ich versuche gerade ein Spiel mit html, css und javascript zu verwirklichen. Dabei habe ich eine Tabelle erstellt und jede Tabellenzelle stellt ein Spielfeld dar.

Folgendes Problem: Ich habe eine Tabelle, in der in jedem td ein Bild angezeigt wird. Jedes td und jedes Bild hat die Höhe und Maximalhöhe 50px. Overflow steht auf auto. Wenn ich jetzt 2 Bilder übereinander anzeigen lassen möchte und das zweite mit position und top auf das erste verschiebe, wird die gesamte Zeile der Tabelle zu groß angezeigt. Kann mir jemand helfen, wie ich das verhindern kann?

#bilddrauf { position:relative; top:-50px; }
td         { height:50px; width:50px; max-height:50px; overflow:auto; border:1px solid;}

<table>
 <tr>
  <td>
   <img src="burg.png">
   <img id="bilddrauf" src="thorstenlegat.png">
  </td>
 </tr>
</table>

Die Bilder sind zwar übereinander, aber das td ist zu hoch.