Umiestnenie prekrývajúcich sa prvkov s kaskádovými štýlmi
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 tabuľku "Layer" programu a môžete usporiadať, kde prvok spadne 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.
Keď príde na web dizajn, 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.
Rád by som premýšľal o prvkoch na webovej stránke ako o kusoch papiera a samotnej webovej stránke ako o koláži. Tam, kde ležím, je papier určený polohou a koľko z neho pokrýva ostatné prvky je z-index.
Z-index je číslo, buď pozitívne (napr. 100) alebo negatívne (napr. -100). Predvolený index z je 0. Prvok s najvyšším z-indexom je na vrchu, nasleduje nasledujúci najvyšší a tak ďalej až k najnižšiemu z-indexu. 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ám päť rôznych prvkov:
- prvok 1 - z-index -25
- prvok 2 - z-index 82
- prvok 3 - z-index nie je nastavený
- prvok 4 - z-index 10
- prvok 5 - z-index -3
Budú sa skladať v nasledujúcom poradí:
- prvok 2
- prvok 4
- prvok 3
- prvok 5
- prvok 1
Odporúčam používať značne 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 môj prvotriedny prvok
- 0 pre môj stredný prvok
- -100 pre môj 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, aby prvok mohol efektívne využívať vlastnosť z-index, musí byť prvok blokovej úrovne alebo v súbore CSS zobraziť "block" alebo "inline-block".
Originálny článok od Jennifer Krynin. Upravený dňa 12/09/16 Jeremy Girard.