Bilder überlappend

[.:: Andreas ::.]

Hallo,
ich habe 3 Bilder die ich überlappt darstellen möchte.
Also 3 div-Container nehmen:
<div id="box1"><img src="..."></div>
<div id="box2"><img src="..."></div>
<div id="box3"><img src="..."></div>

#box1 { position:relative; top:10px; left:20px; z-index:1; margin:0px;}
#box2 { position:relative; top:-80px; left:240px; z-index:2; margin:0px;}
#box3 { position:relative; top:-200px; left:240px; z-index:2; margin:0px;}

Da relativ fängt das 2. Bild an der Unterkante des ersten an, daher -80. Das gleiche beim 3. Bild.

Die Bilder werden auch richtig überlappt, aber der nebeneffekt ist der dass die Höhe für alle 3 Bilder untereinander quasi reserviert wird und daher Inhalte die danach kommen eben einen Abstand zum letzten Bild haben. Das 3. Bild muss man jetzt noch viel höher schieben (-200) da man ja die unsichtbaren 80px überwinden muss.
Einfach mal mit der gedrückten Maustaste über die Bilder fahren und man sieht den Schatten.

Was kann man dagegen machen? Eine Lösung wäre sicherlich die Abs. Positionierung, aber wie wirkt sich dann unterschiedliche Auflösungen, Browser etc aus?

Gruß Andreas
Hier der Link: http://www.access-o-mania.de/pension/
PS: Seite ist noch am Entstehen