Čo je Z-index?
Z-index je CSS vlastnosť, ktorá určuje poradie prekrývania prvkov na webstránke. Vyššia hodnota z-index znamená, že prvok sa zobrazí nad ostatnými. Správna správa z-indexov je kľúčová pre modálne okná, dropdown menu a sticky navigáciu.
Definícia Z-index
Čo je z-index
Z-index je CSS vlastnosť, ktorá ovláda tretiu dimenziu (os Z) rozloženia webstránky — určuje, ktorý prvok sa zobrazí „nad" alebo „pod" iným. Platí len pre prvky s position nastaveným na relative, absolute, fixed alebo sticky.
Bez systematickej správy z-indexov sa webstránky rýchlo stávajú chaotickými — vývojári pridávajú stále vyššie hodnoty (z-index: 9999), aby prekonali existujúce, čo vytvára „z-index vojny".
Z-index škálovanie v design systémoch
- z-0 (0) — základná úroveň, bežné prvky
- z-10 (10) — dropdown menu, autocomplete
- z-20 (20) — sticky navigácia, floating elementy
- z-30 (30) — overlay (zatmavené pozadie)
- z-40 (40) — modálne okná, dialógy
- z-50 (50) — toasty, notifikácie
- z-max (9999) — výnimočné prípady (debugovacie panely)
Stacking context
Z-index funguje v rámci stacking kontextov. Prvok s nastaveným z-index vytvára nový kontext — jeho deti sa vrstvujú len v rámci rodiča. Toto je najčastejší zdroj zmätkov: z-index: 9999 nepomôže, ak rodič má nižší z-index. Design systémy preto definujú z-index škálu ako súčasť tokenov.
Praktický príklad
Príklad: Sticky navigácia prekrýva obsah, ale modálne okno musí byť nad navigáciou.
Problém: Navigácia má z-index: 100, vývojár nastaví modálu z-index: 50 — modál sa schová za navigáciu.
Riešenie s design tokenmi: --z-nav: 20, --z-overlay: 30, --z-modal: 40. Modál je vždy nad navigáciou, tím používa tokeny namiesto náhodných čísel.
Často kladené otázky
Čo je z-index v CSS?
Z-index je CSS vlastnosť, ktorá určuje poradie prekrývania prvkov. Vyššia hodnota znamená, že prvok sa zobrazí nad ostatnými. Funguje len na pozicovaných prvkoch.
Prečo z-index nefunguje?
Najčastejšie dôvody: prvok nemá nastavenú position (relative, absolute, fixed), rodič vytvára nový stacking context s nižším z-index, alebo iný prvok má vyšší z-index.
Ako spravovať z-index v design systéme?
Definujte z-index škálu ako design tokeny s pomenovaniami (z-dropdown, z-nav, z-modal, z-toast). Nikdy nepoužívajte náhodné hodnoty — vždy referencujte token.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.