Statische und relative Positionierung

Die Eigenschaft position steuert, wie ein Element im Dokumentfluss platziert wird. Die fünf Werte sind: static, relative, absolute, fixed und sticky.

Für jedes Element gilt standardmäßig position: static. Statische Elemente folgen dem normalen Dokumentfluss – Blockelemente werden vertikal untereinander angeordnet, Inline-Elemente fließen von links nach rechts. Die Offset-Eigenschaften (top, right, bottom, left) haben keine Wirkung.

position: relative belässt das Element im normalen Fluss, ermöglicht aber, es mithilfe von top, right, bottom und left relativ zu seiner eigenen normalen Position zu verschieben.

Wenn Sie position: relative mit Offsets verwenden, wird das Element zwar visuell verschoben, aber sein ursprünglicher Layoutplatz bleibt weiterhin reserviert. Andere Elemente füllen die entstandene Lücke nicht.

Offset-Eigenschaften verschieben das Element von seinem Bezugspunkt aus:

• top: verschiebt es von der oberen Kante aus nach unten
• left: verschiebt es von der linken Kante aus nach rechts
• Negative Werte kehren die Richtung um

z-index funktioniert nur bei positionierten Elementen (nicht bei statischen). Wenn Sie die Ebenenreihenfolge steuern müssen, setzen Sie mindestens position: relative.

Der wichtigste Einsatz von position: relative besteht darin, ein Element zum Containing Block für absolut positionierte Kindelemente zu machen – auch ohne Offset-Werte.

Die Kombination aus position: relative und transform erstellt einen neuen Stacking Context. Das Element bleibt im Fluss, kann aber visuell transformiert werden.

Vermeiden Sie, für jedes Element position: relative festzulegen. Dadurch werden Stacking Contexts erstellt, was die Verwaltung von z-index erschweren kann. Verwenden Sie es nur, wenn Sie Offsets benötigen oder absolut positionierte Kindelemente verankern möchten.

Da relative Positionierung den Layoutfluss nicht beeinflusst, können Sie top/left sicher für visuelle Effekte animieren – die Animation von transform: translate() ist jedoch performanter.

Öffnen Sie in den DevTools das Panel Computed, um den tatsächlich wirksamen Wert von position zu sehen. Das Box-Modell-Diagramm zeigt die genau angewendeten Offset-Koordinaten.

Was geschieht mit dem Layoutplatz eines Elements, wenn Sie position: relative; top: 20px anwenden?

position: static ist der Standard – keine Offsets, kein Stacking. position: relative ermöglicht Offsets ausgehend von der eigenen Position und bewahrt den Layoutplatz des Elements. Die wichtigste Funktion besteht darin, als Containing Block für absolut positionierte Kindelemente zu dienen.