XHTML + CSS – 24 lekcia – z-index

Pre rozšírenie polohovania elementov nie len do smerov osi X a Y slúži príkaz z-index, ktorý umožňuje nastaviť polohu elementu v smere osi Z. Os Z si môžeme predstaviť jednoducho, ako os ktorá pretína náš monitor v smere od našich očí. Čiže elementy sú akože bližšie k nám (pred monitorom) a ďalej od nás (za monitorom). Keď si povieme že obrazovka nášho monitora bude mať hodnotu z-index: 0;, tak elementy bližšie k nám budú nadobúdať kladné hodnoty z-index, (napr.: z-index: 100;) a elementy za monitorom budú nadobúdať záporné hodnoty z-index.

V realite sa ale všetko odohráva “na jednom plátne” (žiadna os Z neexistuje) a tak je dôležité vedieť ktorý element má byť vykresľovaný a ktorý nie. Z index je veľmi obľúbený a v súčasnosti veľmi používaný pre rôzne vyskakovacie okná (najčastejšie reklamy), ktoré sa zobrazujú nad obsahom stránky. Ďaľšie veľmi populárne uplatnenie je zobrazovanie formulárov pre posielanie správ na sociálnych sieťach, zobrazovanie fotiek (po kliknutí sa ztmaví pozadie a fotka vystúpi pred obsah stránky). Aplikácií pre polohovanie v smere osi Z  je nespočetne a preto je dobré vedieť ako sa tieto jednoduché finty robia.

Zanechajte komentár