Absolute Positionierung

Die obigen Beispiele zeigen, dass auch für folgende Anwendungsfälle die Positionierung von Boxen mit Flexboxen nicht ausreicht:

• Elemente müssen an einer exakt vorgegeben Position innerhalb des Browserfensters stehen (z.B. Footer: immer ganz unten)
• Elemente müssen bezogen auf andere Elemente an einer exakt vorgegebenen Position stehen (z.B. Bilder müssen in einer Bildergalerie exakt übereinander stehen)

In solchen Fällen spricht man von einer absoluten Positionierung einer Box.

Bei der absoluten Positionierung wird die Positionierung einer Box in Form von Abständen vom übergeordneten Container definiert. Der übergeordnete Container ist

• die erste explizit positionierte Box in der Boxenhierarchie entlang der Eltern-Beziehung oder
• das Browserfenster, falls keine der Eltern-Boxen explizit positioniert wurde. Eine Box wird explizit positioniert, wenn im zugehörigen CSS der Wert der Eigenschaft position gesetzt wurde. Der Wert selbst (relative, absolute) spielt dabei keine Rolle.

Bei der absoluten Positionierung wird eine Box aus dem Standard-Fluss herausgenommen. Alle anderen Boxen im selben Container werden daher so angeordnet, als gäbe es die absolut positionierte Box gar nicht.

Schritt 1: Standardpositionierung ohne die absolut positionierten Boxen

Der Browser berechnet die Standard-Positionierung für alle nicht absolut positionierten Boxen (nach den Regeln der oben vorgestellten statischen Positionierung).

Schritt 2: Platzierung der absolut positionierten Boxen in Abhängigkeit vom übergeordneten Container

Anschließend wird jede Box, welche die Eigenschaft position:absolute besitzt, in Abhängigkeit ihrer übergeordneten Container über den bisherigen Boxen positioniert. Der Bezug ist dabei die erste übergeordnete Container-Box in der Hierarchie nach oben, welche selbst explizit positioniert wurde oder das Browserfenster, wenn es eine solche Box nicht gibt.

Bei der absoluten Positionierung werden alle Boxen, die nicht absolut positioniert sind, so positioniert, als gäbe es die absoluten Boxen nicht. Deswegen überlappen die absolut positionierten Boxen oft alle anderen Boxen.

Die absolute Positionierung wird mit der CSS-Eigenschaft position definiert. Sie muss dafür den Wert absolute haben. Zudem wird die Entfernung der Boxen-Ränder von den Rändern des übergeordneten Containers angegeben. Dazu werden meist zwei der folgenden vier Eigenschaften benutzt:

• top: Abstand des oberen Randes
• right: Abstand des rechten Randes
• bottom: Abstand des unteren Randes
• left: Abstand des linken Randes

Die Werte dieser Eigenschaften können absolute Angaben mit Maßeinheit (meistens px) oder Prozentangaben (im Verhältnis zur Breite des übergeordneten Elementes) sein.