Position der Elemente mit top, left, right und bottom festlegen

Die Elemente einer Website werden gewöhnlich in einem gewissen Fluss angeordnet. Inline-Elemente werden nebeneinander angeordnet und am Ende der Zeile erfolgt ein Zeilenumbruch. Ein Block-Element beginnt jeweils mit einer neuen Zeile und sorgt dafür, dass das nächste Block-Element ebenfalls in einer neuen Zeile beginnt. Für ein Element kann mit der Eigenschaft position die Positionsart festgelegt und zusätzlich mit den Eigenschaften top, left, right oder bottom die Position angegeben werden. Hierbei kann man ein Element auch aus dem normalen Fluss nehmen.

Kind-Element mit der Eigenschaft position ausrichten

Somit wird mit der Eigenschaft position festgelegt, wie die weiteren Eigenschaften top, left, right und bottom zu werten sind. Anhand eines Beispiels ist nachfolgend die Syntax abgebildet.

Position von Elementen festlegen

Werte für die Eigenschaft position

Für die Eigenschaft position können die folgenden Werte angegeben werden.

  • static (Standardwert)
  • relative (Relativ zur normalen Position)
  • absolute (Relativ zum Elternelement oder zum BODY-Bereich)
  • fixed (Relativ zum Anzeigebereich des Browsers)
  • initial (Setzt auf den Standardwert)
  • inherit (Geerbt vom Elternelement)

position: static;

Mit dem Wert static wird zum normalen Fluss nichts geändert. Etwaige Angaben von top, left, right und bottom haben daher keine Auswirkung auf die Position des Elements.

position: relative;

Mit dem Wert relative werden die Werte von top, left, right und bottom als relative Werte zur normalen Position gewertet. Die Elemente davor und danach verhalten sich so, als hätte man dem Element keine Position zugewiesen und bleiben an ihren normalen Positionen. Dadurch kann es zu Überlappungen kommen. Wenn sich das Element davor ändert, z.B. in der Höhe, dann wandert das Element mit der relativen Positionierung mit, da dadurch auch die normale Position des Elements geändert wird.

position: relative

position: absolute;

Mit dem Wert absolute wird das Element vom normalen Fluss herausgenommen. Die übrigen Elemente verhalten sich dahingehend, dass sie die Box ignorieren und sich so verhalten, als gäbe es sie gar nicht.

position: absolute

Die Werte von top, left, right und bottom beziehen sich dabei relativ zum Elternelement, wenn es ebenfalls positioniert wurde. Ansonsten gelten die Werte relativ zum Anzeigebereich des Browsers.

position: fixed;

Beim Wert fixed beziehen sich die Werte top, left, right und bottom auf den Anzeigebereich des Browsers (viewport) und das Element wird an dieser Position fixiert. Dadurch kann man erreichen, dass das Element immer an einer bestimmten Stelle des Browsers "haftet", selbst wenn man die Website scrollt. Mit dem folgenden Code würde das Element auf der rechten, unteren Seite des Anzeigebereichs festgesetzt.

.selektor1 {
width: 300px;
position: fixed;
bottom: 0;
right: 0;
}

Der CSS-Code würde sich beim positionierten Element wie abgebildet auswirken.

position: fixed

Überschreibung von bottom durch top und right durch left

Die Verwendung von top, right, left und bottom sollte passend sein. Beispielsweise kann die Position nicht gleichzeitig left: 0; und right: 0; sein. Dasselbe gilt für top und bottom, die nicht gleichzeitig 0 sein können. Macht man trotzdem solche Angaben, überschreibt left den Wert von right und top überschreibt den Wert von bottom.

Wurde für left der Wert auto angegeben, dann ist der berechnete Wert für right der Wert von left, jedoch mit umgekehrtem Vorzeichen. Haben beide Eigenschaften keinen Wert mit auto, wird der Wert von right auf auto umgestellt.

Ähnlich verhalten sich top und bottom. Wurde für top der Wert auto angegeben, gilt für den berechneten Wert von bottom der Wert von top mit umgekehrtem Vorzeichen. Haben beide nicht den Wert von auto, wird der Wert von bottom auf auto gesetzt.

Werte für top, left, right und bottom

Für die vier Eigenschaften können die folgenden Werte und Einheiten verwendet werden. Es ist möglich, neben positiven auch negative (mit einem Minuszeichen) Werte anzugeben.

Numerische Werte mit Einheit

  • <Zahl>px (Pixel)
  • <Zahl>% (Prozentuale Angabe, bei top und bottom wird auf die Höhe und bei left und right auf die Breite des umschließenden Elements bezogen und falls das unbekannt ist, wird der Wert wie auto behandelt.)
  • <Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
  • <Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
  • <Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
  • <Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
  • <Zahl>vw (1vw entspricht 1% der Anzeigebreite)
  • <Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
  • <Zahl>vmin (der kleinere Wert von vw oder vh)
  • <Zahl>vmax (der größere Wert von vw oder vh)
  • <Zahl>pt (Punkt)
  • <Zahl>pc (Pica)
  • <Zahl>in (Inch)
  • <Zahl>mm (Millimeter)
  • <Zahl>cm (Zentimeter)

Keyword-Werte

  • auto (Standardwert, überlässt die Berechnung dem Browser)
  • initial (Setzt auf den Standardwert)
  • inherit (Geerbt vom Elternelement)