Lepivá pozice
Poslední hodnota vlastnosti position je sticky (lepivá). Lepivý prvek je kombinací relativního a pevného. Nejdřív se chová jako relativní: je v normálním toku a posouvá se se stránkou. Jakmile by ho ale posouvání odneslo za kraj určený jeho posunem, například top: 0, přilepí se k tomuto kraji okna a zůstane tam, jako pevný prvek.
Lepivý prvek ale nikdy neopustí svého rodiče. Drží se jen tak dlouho, dokud je jeho rodič na obrazovce: když konec rodiče odjede pryč, odjede lepivý prvek s ním. Vyzkoušejte si to v tomto rámečku. Oba nadpisy v něm mají position: sticky a top: 0 a každý z nich je ve vlastní části. Rámeček se posouvá sám, a tak se nadpisy přilepují k jeho hornímu kraji, ne k hornímu kraji okna:
Část A
Posuňte obsah tohoto rámečku dolů.
Nadpis části A se přilepil nahoru.
Drží se tam, dokud je část A vidět.
Posouvejte dál…
Toto je poslední řádek části A.
Část B
Část A odjela pryč a její nadpis s ní.
Teď se nahoru přilepil nadpis části B.
Jeho rodičem je část B.
Posouvejte dál…
Tady rámeček končí.
Bez posunu (top, bottom a dalších) se lepivý prvek nepřilepí vůbec.
Lepivá pozice se často používá pro navigaci, která při posouvání zůstává nahoře v okně. Na rozdíl od pevného prvku si lepivý zachovává své místo v normálním toku, takže na začátku stránky nezakrývá obsah pod sebou.
A který prvek je navrchu, když se prvky překrývají? Prvky s jinou pozicí než static se kreslí přes statické prvky a mezi sebou v pořadí, v jakém jsou v HTML: pozdější zakryje dřívější. Změnit to můžeme vlastností z-index, která funguje u prvků s jinou pozicí než static: prvek s vyšším z-index zakryje prvek s nižší hodnotou. Prvky bez z-index se chovají, jako by měly 0.
Jak psát:
Pokyny
Do pravidla pro nav přidejte position: sticky a top: 0. Posuňte stránku dolů: navigace zůstává nahoře v okně. Jejím rodičem je body, které zabírá celou stránku, a tak navigace nikdy neodjede.
Posuňte stránku ke kartičkám plemen: při posouvání jedou přes navigaci, místo aby zajely pod ni. Mají position: relative a v HTML jsou až za navigací, takže se kreslí přes ni. Do pravidla pro nav přidejte z-index: 1. Teď kartičky zajíždějí pod navigaci.