Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

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
  1. Ä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;
    }

  2. 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:

Abbildung 12.7: Absolut positioniert, relativ zum Kopfbereich
Abbildung 12.7: Absolut positioniert, relativ zum Kopfbereich

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:

Abbildung 12.8: Absolut positioniert, relativ zum Kopfbereich
Abbildung 12.8: Absolut positioniert, relativ zum Kopfbereich

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.