Umístění překrývajících se prvků s kaskádovými styly
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 spadne do plátna 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ů.
Když přicházíme s webovým designem, je zde 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.
Mám rád přemýšlet o prvcích na webové stránce jako o papírech a samotné webové stránce jako o koláži. Tam, kde ležím, je papír 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ám pět různých prvků:
- prvek 1 - z-index -25
- prvek 2 - z-index 82
- prvek 3 - z-index není nastaven
- prvek 4 - z-index 10
- prvek 5 - z-index -3
Budou zásobníky v následujícím pořadí:
- prvek 2
- prvek 4
- prvek 3
- prvek 5
- prvek 1
Doporučuji používat značné hodnoty z-indexu pro uložení vašich prvků. 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 můj nejvyšší prvek
- 0 pro můj střední prvek
- -100 pro můj dolní 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 v souboru CSS používat zobrazení "block" nebo "inline-block".
Původní článek Jennifer Krynin. Upraveno dne 12/09/16 Jeremy Girard.