CSS Positionierung zu Tailwind – absolute, inset, z-index

position:absolute → absolute. Seiten mapen auf top/right/bottom/left. Custom z-index → Arbitrary.

Positionierung folgt klaren Regeln: position:absolute wird zu absolute, und jeder Versatz erhält seine passende Utility für die jeweilige Seite. Eigene z-index-Werte landen in arbitrary values. Die eigentlichen Stolperfallen sind sticky, der Stacking Context und abgeschnittene Overflows, die Sie besser direkt im Browser prüfen.

position und Offsets

position:absolute → absolute; top/right/bottom/left → inset-* oder top-*, wenn die Skala passt.

z-index

übliche z-index → z-10 / z-50. Seltene Markenwerte → z-[…].

Sticky und Stacking

sticky + overflow an Vorfahren bleibt Klassiker: Stacking-Context nach Konvertierung prüfen.

Ausprobieren

Konverter öffnen

.example { display: flex; gap: 1rem; padding: 1rem; }

Vertrauenshinweis: Ausgabe visuell prüfen. Der Konverter ist ein Entwurfshilfe.