Z-index

Mi az a Z-index?

A Z-index egyfajta árnyékeffekt, képzeljük el úgy, mint egymást átfedő elemeket.

A fogalom megértéséhez először ejtsünk pár szót a CSS-ről, ami a Z-index alapja.

CSS jelentése: Cascading Style Sheets – egymásba ágyazott stíluslapok

Felelős a weblap vizuális stílusáért. Ide tartozik a betűkészlet, a betűméret, valamint a színek és nem utolsó sorban az oldal elrendezése is többek között.

Mire jó a Z-index?

A Z-index háromdimenziós ábrázolást tesz lehetővé.

Ha például képeket vagy szövegeket szeretnénk egymásra halmozva, de átfedéssel ábrázolni, akkor ez az eszköz jól jöhet.

A HTML-kódban elfolgalt sorrend határozza meg, hogy melyik elem melyiket takarja. Amelyik később szerepel a kódban, az lesz legelöl, az fogja a többit takarni.

A Z-index tehát megadja az egyes elemek sorrendjét.

Minél nagyobb a szám, annál közelebb kerül a látogatóhoz. Ha ezt a számot csökkentjük, akkor távolodik.

Hogy néz ki a Z-index a gyakorlatban?

HTML példa:

kijelölő { z-index : érték; }

Csak elhelyezett elemekkel működik. Helyzete lehet: relatív, abszolút, rögzített vagy ragadós. Ha ezt nem jelöljük a kódolásban, nem fog sikerülni a művelet.

HTML kódolásban valahogy így nézne ki

És ilyen az eredmény:

Több böngésző is támogatja ezt a fajta kódolást: Chrome, Firefox, Edge, Opera, Safari és Internet Explorer.