Eine haftende Kopfzeile

Noch eine letzte Sache: Die Kopfzeile mit der Navigation soll oben im Fenster bleiben, während der Besucher scrollt, damit die Links immer griffbereit sind.

Wie du aus dem CSS-Kurs weißt, bleibt ein Element mit position: sticky im normalen Fluss, bis das Scrollen es über den durch seine Verschiebung festgelegten Rand hinausschieben würde. Dann haftet es an diesem Rand, aber nur, solange sein Elternelement auf dem Bildschirm zu sehen ist. Das Elternelement unseres header ist body, das so hoch ist wie die ganze Seite, die Kopfzeile scrollt also nie weg. In Tailwind genügen dafür die Klassen sticky top-0. (Mit fixed bliebe die Kopfzeile auch im Fenster, würde aber den normalen Fluss verlassen, und der Hero würde unter sie rutschen.)

Welches der sich überlappenden Elemente oben liegt, entscheidet z-index mit den Klassen z-0, z-10, z-20, z-30, z-40 und z-50 (z-10 ist z-index: 10). Die Zehnerschritte lassen Platz für Elemente, die dazwischen müssen.