Přilepené záhlaví

Poslední věc: záhlaví s navigací by mělo při posouvání zůstávat nahoře v okně, aby byly odkazy pořád po ruce.

Z kurzu CSS víte, že prvek s position: sticky zůstává v normálním toku, dokud by ho posouvání neodneslo za kraj určený jeho posunem. Pak se k tomuto kraji přilepí, ale jen dokud je jeho rodič na obrazovce. Rodičem našeho prvku header je body, které je vysoké jako celá stránka, takže záhlaví nikdy neodjede. V Tailwindu na to stačí třídy sticky top-0. (S fixed by záhlaví v okně také zůstalo, ale vypadlo by z normálního toku a úvodní sekce by pod něj zajela.)

Který z překrývajících se prvků je navrchu, určuje z-index, a to třídami z-0, z-10, z-20, z-30, z-40 a z-50 (z-10 je z-index: 10). Kroky po deseti nechávají místo pro prvky, které by bylo potřeba vložit mezi ně.