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:staticposition:relativeposition:absoluteposition: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).