Weitere Infos
Sie lesen:
LB1 (2009)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
12.5.2 Absolute Positionierung kombiniert mit einem umgebenden, relativ positionierten Element
Besser und vor allem zuverlässiger wäre es, den Absatz relativ zum Kopfbereich zu positionieren, und genau das erreichen Sie durch einen einfachen Trick. Wie hieß es etwas weiter oben so schön:
- Die absolute Positionierung eines Elements erfolgt relativ zum nächsten umgebenden Element (containing block), das ebenfalls positioniert ist (relative, absolute oder fixed).
Und jetzt der Trick:
- Wenn Sie den Kopfbereich mit position:relative versehen, ihm aber keinerlei Werte mit auf den Weg geben, bleibt er zwar im flow, gilt aber als positioniert.
- Und dadurch wird der Kopfbereich zum Bezugspunkt für die absolute Positionierung von #kopfbereich p.
Klingt kompliziert? Probieren Sie es aus:
ToDo: Positionierung des Absatzes relativ zum Kopfbereich
- Ändern Sie das Stylesheet bildschirm.css wie folgt:
#kopfbereich {
position: relative; /* positioniert, aber bleibt im Fluss */
color: black;
background: #ffe574 url(farbverlauf.jpg) repeat-y top left;
padding: 10px 20px 0 20px;
}
#kopfbereich p {
position:absolute;
top: 10px ;
right: 10px; /* war vorher left: 50% */
padding: 5px 0 5px 0;
margin-bottom: 0;
} - Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.
Auf den ersten Blick sieht das Ergebnis gar nicht so viel anders aus als in Abbildung 12.5:
Diese Kombination von absoluter und relativer Positionierung bietet einige Vorteile:
- Der Bezugspunkt für den Absatz ist jetzt #kopfbereich, und zwar genau genommen die äußere Kante des padding (»the padding edge«) oben und rechts.
- Wenn zum Beispiel die Seite selbst nicht mehr zentriert wird, macht das nichts, der Absatz wird den Kopfbereich niemals verlassen.
Merke: Die absolute Positionierung wird durch diesen kleinen Trick relativ flexibel.
Wenn der Wrapper nicht mehr im Browserfenster zentriert wird, bleibt der Absatz trotzdem innerhalb des Kopfbereichs:
Mit einem einfachen display: block für das span-Element können Sie das rot eingefärbte Wort »Grundlagen« übrigens eine Zeile tiefer setzen. Und mit einem text-align: right für das umgebende p würden beide Zeilen rechts ausgerichtet werden. Probieren Sie es einmal aus.
Grundlagentechnik: absolute und relative Positionierung kombinieren
Die in diesem Beispiel gezeigte Kombination von absoluter Positionierung in Verbindung mit einem umgebenden, relativ positionierten Element ist eine sehr nützliche Grundlagentechnik zur Positionierung, die auf Webseiten häufig eingesetzt wird.