CSS: Positionierung

Erstellt: 14.04.2006 | Aktualisiert: 25.04.2008

Blockelementen können mittels CSS-Deklaration position: static, position: relative, position: absolute, position: fixed an einer bevorzugten Stelle im XHTML-Dokument positioniert werden.

Mögliche Werte

Die Deklaration position erlaubt vier unterschiedliche Werte

  • position:static
  • position:relative
  • position:absolute
  • position:fixed

Schauen wir uns mal genauer an, wie sich diese voneinander unterscheiden.

position: static

Der Wert static hat keine Einfluss auf die Positionierung eines Elementes, sondern lässt es an jenem Ort erscheinen, an dem es im XHTML-Dokument geschrieben wurde. Der Wert static ist Ausgangswert und muss nicht spezifiert werden.

position: relative

Spezifiert man den Wert als relative so kann man mit den Deklarationen top oder bottom bzw. left oder right das Element relativ zur normalen Position im Dokumentfluss verschieben.

position: absolute

Setzt man den Wert auf absolute kann ein Element komplett aus dem Dokumentfluss herausgelöst und an einer beliebigen Stelle positioniert werden. Dabei wird der Raum der ursprünglichen Position “freigegeben”, das heisst die anderen Elemente verhalten sich so, wie wenn kein entsprechendes XHTML-Element dazwischen liegen würde.

Die ganze Sache verhält sich ein wenig anders, wenn im XHTML-Dokument eines der Elemente innerhalb eines anderen geschrieben wird. Setzt man nun den Wert des inneren Elementes auf absolute so richtet sich dieses Element an der linken oberen Ecke des Eltern Elementes aus. Dies allerdings nur, wenn das Eltern-Element selber den Wert relative, absolute oder fixed hat.

Ansonsten wird das Element mit dem Wert absolute ebenfalls am Browser-Fenster ausgerichtet.

position: fixed

Der Wert fixed hat die gleiche Auswirkung wie der Wert absolute, allerdings ist das Eltern-Element immer das Browser-Fenster und nicht das umschliessende Element. Desweitern bleibt ein Element mit dem Wert fixed auch beim Scrollen immer an dieser Position (ACHTUNG: nich von IE 6 unterstützt).

Verwandet Snippets

Weblinks