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

Nur absolute Positionierung: relativ zum Stammelement html

In der ersten Variante wird nur die absolute Positionierung verwendet. Der Absatz im Kopfbereich wird dadurch relativ zum Stammelement html positioniert:

ToDo: Positionierung des Absatzes relativ zum Stammelement html
  1. Ändern Sie die Regel für #kopfbereich p wie folgt: 

    #kopfbereich p {
      position:absolute; 
      top: 25px ; 
      left: 50%; 
      padding: 5px 0 5px 0;
      margin-bottom: 0; 
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.

Die Webseite sieht mit dieser Regel im Browser ungefähr so aus:

Abbildung 12.5: Absolut positioniert, scheinbar okay
Abbildung 12.5: Absolut positioniert, scheinbar okay

Auf den ersten Blick sieht die Seite ganz okay aus. Die folgenden Dinge sind passiert:

  • Zuerst wird #kopfbereich p komplett aus dem Fluss herausgehoben und ist somit für andere Elemente nicht mehr vorhanden. Dadurch rutscht der Navigationsbereich ein Stück nach oben.
  • Da es kein umgebendes positioniertes Element gibt, beziehen sich die Angaben top:25px und left:50% auf das Stammelement html. Der Absatz beginnt 25px von oben und genau auf der Hälfte des Browserfensters.

Die vertikale Positionierung vom oberen Rand des Browserfensters ist auf diese Weise noch einigermaßen genau möglich, aber die horizontale Positionierung mit 50% von links beruht auf Versuch und Irrtum und ist reine Glückssache.

Auch wenn die Webseite in Abbildung 12.5 okay aussieht, ist sie ein Kartenhaus und nicht besonders stabil. Abbildung 12.6 zeigt was passiert, wenn zum Beispiel der Wrapper nicht mehr im Browserfenster zentriert wird.

Dem positionierten Absatz sind solche Änderungen egal. Er bleibt horizontal einfach bei 50% des Browserfensters stehen, weil sein Bezugspunkt das Stammelement html ist. Er weiß nichts von einem Kopfbereich.

Abbildung 12.6: Absolut positioniert, nicht mehr okay
Abbildung 12.6: Absolut positioniert, nicht mehr okay

Um Missverständnissen vorzubeugen: Die absolute Positionierung zum Stammelement html hat durchaus ihre Berechtigung, zum Beispiel in den mehrspaltigen Layouts mit absoluter Positionierung, aber in diesem Beispiel ist die im folgenden Abschnitt gezeigte Kombination von absoluter Positionierung mit einem relativ positionierten umgebenden Element die bessere Lösung.