CSS-problem: Bilderüberlagerung bei Einblendung

[Uhu]

Hallo!

Ich habe ein Problem mit meinem CSS-script.
Das Script sieht folgendermaßen aus:

Die Html-datei besteht aus einem großen Bild, das durch 4 einzelne Bilder dargestellt wird. In der CSS-datei ist definiert: sobald man mit der Maus über eines der vier Bilder fährt, wird eine doppelt so große Ausgabe des Bildes angezeigt.

Mein Problem nun: die anderen drei (kleinen) Bilder machen dem großen Bild "Platz"; ich möchte aber, dass die kleinen Bilder überlagert werden.
Ist das irgendwie möglich?

html-datei | CSS-datei

(Kleiner Tipp: die Größe der Bilder ist noch nicht so ganz angepasst, also am besten mit ner Auflösung ab 1280 x 1024 ansehen XD )

 

[Digedag]

Wie wäre es denn mit einer absoluten Positionierung? Mit right, left, top und bottom kannst du angeben von wo deine Box beginnt.

Falls du es noch nicht kennst: http://de.selfhtml.org/css/eigenschaften/positionierung.htm

EDIT: Ich war mal so frei und habe das "richtige" Script hochgeladen.

Mit position: können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:

absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements
...

Mit "top" "bottom" "right" und "left" kann man das Element dann in Pixeln oder Prozenten positionieren.
Der z-index legt dann die Schichten fest. Sprich: Elemente mit höherem z-index überlappen Elemente mit niedrigerem z-index.

Btw: Wenn du Webspace sparen willst kannst du die kleinen Bilder auch weglassen.