Jednou z problémů při použití polohování CSS pro rozvržení webové stránky je to, že některé vaše prvky se mohou překrývat s ostatními. To funguje dobře, pokud chcete, aby poslední prvek HTML byl na vrcholu, ale co když nemáte nebo co, pokud chcete mít prvky, které se v současné době nepřekrývají, aby tak učinily, protože návrh vyžaduje tento "vrstvený" vzhled ? Chcete-li změnit způsob překrývání prvků, musíte použít vlastnost CSS.
Pokud jste použili grafické nástroje v aplikacích Word a PowerPoint nebo robustnější editor obrázků, jako je Adobe Photoshop, je pravděpodobné, že jste v akci viděli něco jako z-index. V těchto programech můžete zvýraznit objekty, které jste vybrali, a vybrat možnost "Odeslat zpět" nebo "Přenést do frontu" určité prvky dokumentu. Ve Photoshopu nemáte tyto funkce, ale máte podokno "Layer" programu a můžete uspořádat, kde prvek padá na plátno přesouváním těchto vrstev. V obou těchto příkladech v podstatě nastavujete z-index těchto objektů.
Co je Z-Index?
Když používáte umístění CSS pro umístění prvků na stránce, je třeba myslet ve třech rozměrech. Existují dva standardní rozměry: vlevo / vpravo a horní / dolní. Index zleva doprava je známý jako index x, zatímco horní až dolní index je y-index. Tímto způsobem byste polohy těchto prvků mohly vodorovně nebo svisle pomocí těchto dvou indexů.
Pokud jde o návrh webových stránek, je i pořadí stohování stránky. Každý prvek na stránce může být navržen nad nebo pod jiným prvkem. Vlastnost z-index určuje, kde je v zásobníku každý prvek. Pokud je x-index a y-index horizontální a vertikální čáry, pak z-index je hloubka stránky, v podstatě 3. dimenze.
Přemýšlejte o prvcích na webové stránce jako o papírech a samotné webové stránce jako o koláži. Kde položíte papír, je určen polohováním a kolik z něj jsou pokryty dalšími prvky je z-index.
- Z-index je číslo, buď pozitivní (např. 100) nebo negativní (např. -100).
- Výchozí z-index je 0.
Prvek s nejvyšším z-indexem je nahoře, následuje další nejvyšší a tak dále dolů k nejnižšímu z-indexu. Pokud mají dva prvky stejnou hodnotu z-indexu (nebo není definována, což znamená použití výchozí hodnoty 0), prohlížeč je bude vrstvit v pořadí, které se objeví v kódu HTML.
Jak používat Z-index
Dejte každému prvku, který chcete ve svém zásobníku, jinou hodnotu z-indexu. Například pokud máte pět různých prvků:
- prvek A - z-index -25
- prvek B - z-index 82
- prvek C - z-index není nastaven
- prvek D - z-index 10
- element E - z-index -3
Budou zásobníky v následujícím pořadí:
- prvek B
- prvek D
- prvek C
- prvek E
- prvek A
Doporučuje se, abyste pro uložení vašich prvků používali značně odlišné hodnoty z-indexu. Tímto způsobem, pokud přidáte další prvky na stránku později, máte prostor pro jejich vložení, aniž byste museli upravovat hodnoty z-indexu všech ostatních prvků. Například:
- 100 pro váš nejvyšší prvek
- 0 pro váš středový prvek
- -100 pro váš spodní prvek
Můžete také dát dvěma elementům stejnou hodnotu z-indexu. Pokud jsou tyto prvky skládané, zobrazí se v pořadí, v jakém jsou napsány v kódu HTML, s posledním prvkem nahoře.
Jedna poznámka: Aby element účinně využíval vlastnost z-indexu, musí být prvek blokové úrovně nebo ve vašem souboru CSS používat zobrazení "block" nebo "inline-block".
