Jednou z problémov pri používaní umiestnenia CSS pre rozloženie webovej stránky je to, že niektoré z vašich prvkov sa môžu prekrývať s inými. To funguje dobre, ak chcete, aby posledný prvok v jazyku HTML bol na vrchole, ale čo, ak nechcete alebo čo, ak chcete mať prvky, ktoré sa v súčasnosti neprekrývajú, aby to urobili, pretože dizajn vyžaduje tento "vrstvený" vzhľad ? Aby ste zmenili spôsob prekrývania prvkov, musíte použiť vlastnosť CSS.
Ak ste použili grafické nástroje v aplikácii Word a PowerPoint alebo robustnejší editor obrázkov ako je Adobe Photoshop, je pravdepodobné, že ste videli niečo ako z-index v akcii. V týchto programoch môžete vyzdvihnúť objekt (y), ktorý ste nakreslili, a vybrať možnosť "Odoslať späť" alebo "Presunúť dopredu" určité prvky vášho dokumentu. Vo Photoshope nemáte tieto funkcie, ale máte podokno "Layer" v programe a môžete usporiadať, kde prvok padne na plátno preskupením týchto vrstiev. V obidvoch týchto príkladoch ste v podstate nastavili z-index týchto objektov.
Čo je Z-index?
Keď používate pozíciu CSS na pozíciu prvkov na stránke, musíte rozmýšľať v troch rozmeroch. Existujú dva štandardné rozmery: vľavo / vpravo a hore / dole. Index zľava doprava je známy ako index x, zatiaľ čo horná časť dole je y-index. Takto by ste umiestňovali prvky horizontálne alebo vertikálne pomocou týchto dvoch indexov.
Pokiaľ ide o dizajn webových stránok, je tu aj poradie stohovania stránky. Každý prvok na stránke môže byť navrstvený nad alebo pod ľubovoľný iný prvok. Vlastnosť z-index určuje, kde je v zásobníku každý prvok. Ak index x a index y sú horizontálne a vertikálne čiary, potom z-index je hĺbka stránky, v podstate 3. dimenzia.
Premýšľajte o prvkoch na webovej stránke ako o kusoch papiera a samotnej webovej stránke ako o koláži. Tam, kde ležíte, papier je určený polohou a koľko z neho sú pokryté ostatnými prvkami, je z-index.
- Z-index je číslo, buď pozitívne (napríklad 100) alebo negatívne (napríklad -100).
- Predvolený z-index je 0.
Prvok s najvyšším z-indexom je na vrchu, nasleduje nasledujúci najvyšší a tak ďalej až po najnižší z-index. Ak dva prvky majú rovnakú hodnotu indexu z (alebo nie je definovaná, čo znamená použitie predvolenej hodnoty 0), prehliadač ich stratí v poradí, v akom sa nachádzajú v jazyku HTML.
Ako používať Z-index
Dajte každému prvku, ktorý chcete vo svojom stohu, inú hodnotu z-indexu. Napríklad, ak máte päť rôznych prvkov:
- prvok A - z-index -25
- prvok B - z-index 82
- prvok C - z-index nie je nastavený
- prvok D - z-index 10
- prvok E - z-index -3
Budú sa skladať v nasledujúcom poradí:
- prvok B
- prvok D
- prvok C
- prvok E
- element A
Odporúča sa používať výrazne odlišné hodnoty z-indexu na uloženie vašich prvkov. Týmto spôsobom, ak do stránky pridáte neskôr viac prvkov, máte priestor na ich vrstvu bez toho, aby ste museli upravovať hodnoty z-indexu všetkých ostatných prvkov. Napríklad:
- 100 pre váš najvyšší prvok
- 0 pre váš stredný prvok
- -100 pre spodný prvok
Môžete tiež dať dva prvky rovnakú hodnotu indexu z. Ak sú tieto prvky naskladané, zobrazia sa v poradí, v akom sú napísané v jazyku HTML, s posledným prvkom na vrchu.
Jedna poznámka: pre prvok, ktorý efektívne používa vlastnosť z-index, musí byť prvok blokovej úrovne alebo vo vašom súbore CSS používať zobrazenie "block" alebo "inline-block".
