Relative Positionierung

Laden Sie das Beispiel aus der Vorlesung herunter: Beispiel. Extrahieren Sie die Inhalte der zip-Datei und speichern Sie die Dateien in Ihrem eigenen Verzeichnis.

Betrachten Sie die HTML-Seite im Browser (Abbildung). Im Vergleich zum Beispiel in der Vorlesung wurde diese noch um zwei Absätze erweitert: der graue Absatz steht in der grünen div-Box, der blaue Absatz steht unter der grünen div-Box.

Positionieren Sie das Bild und den Text mit dem roten Hintergrund (das img- und das span-Element) relativ zu ihren ursprünglichen Positionen nach den folgenden Angaben:

• Das Bild wird nach unten um 20 Pixel und nach rechts um 50 Pixel verschoben.
• Der Text wird nach oben um 20 Pixel und nach links um 150 Pixel verschoben.

Beantworten Sie die folgenden Fragen:

• Warum steht das span-Element jetzt über dem img-Element?
• Warum überlappt das img-Element jetzt die graue Absatz-Box? Müßte die Box nicht automatisch nach unten verschoben werden?