Absolute Positionierung

Vorbereitungen

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.

Beispiel aus der Vorlesung: Orientierung am Browerfenster

Absolute Positionierung in Bezug auf das Browserfenster.

Positionieren Sie das Bild und den Text absolut nach den folgenden Angaben:

Das Bild steht rechts (Entfernung: 50 Pixel) und unterhalb (Entfernung: 20 Pixel) der linken oberen Ecke des Browserfensters.
Der Text steht oberhalb (20 Pixel) und links (150 Pixel) von der rechten unteren Ecke des Browserfensters.

Was müssen Sie ggf. an dem Layout des div-Elementes ändern, damit es aussieht wie in der Abbildung? Warum?

Beispiel aus der Vorlesung: Orientierung am übergeordneten Container

Positionieren Sie das Bild und den Text absolut nach den folgenden Angaben:

Das Bild steht rechts (Entfernung: 50 Pixel) und unterhalb (Entfernung: 20 Pixel) der linken oberen Ecke des übergeordneten div-Elements.
Der Text steht oberhalb (20 Pixel) und links (150 Pixel) von der rechten unteren Ecke des übergeordneten div-Elements.

Was müssen Sie ggf. an dem Layout des div-Elementes ändern, damit es aussieht wie in der Abbildung? Warum?