Mi az a z-index és hogyan kell használni?

A z-index CSS tulajdonsággal azt határozhatjuk meg, hogy egy elem hanyadik helyen legyen a többihez viszonyítva.

CSS alapok (A CSS alapjainak összefoglalója) című cikk nyitóképe

Mi az a z-index és hogyan kell használni?

A z-index CSS tulajdonsággal azt határozhatjuk meg, hogy egy elem hanyadik helyen legyen a többihez viszonyítva. Úgy kell ezt elképzelni mint egy képszerkesztő programban a rétegeket, amelyik réteg legfelül van az látszódik a leginkább. Ami lentebb van azt eltakarja a felette lévő réteg. A CSS z-index-nél a fentebb lévő rétegek magasabb számot kapnak, míg a lentebb lévők kisebbet. Negatív és pozitív számok egyaránt megengedettek.

Fontos, hogy a z-index-et csak úgy tudjuk alkalmazni, ha előtte valamilyen pozicionálást beállítottunk. Bármelyik pozíció meghatározás megfelel, kivéve az alapértelmezett statikus. Ha nem tudod, hogy mik azok a CSS pozíciók, akkor itt olvashatsz róluk.

z-index szintaxis

z-index: SZÁM;
Code language: HTTP (http)

A szám helyére bármilyen negatív vagy pozitív szám kerülhet. Ne felejtsük el, hogy a z-index csak olyan elemen működik, amelyet már előtte pozícionáltunk. Ezért a kiegészített szintaktikánk így néz ki:

position: ÉRTÉK;
z-index: SZÁM;
Code language: HTTP (http)

Példa két z-index-re pozitív értékekkel

HTML kód

<img src="https://webiskola.hu/kiskep.jpg" style="position:absolute; z-index:1;">
<p style="position: relative; z-index: 2; color: red;">z-index</p>
Code language: HTML, XML (xml)

Eredmény

kiskep

z-index

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A példán látszik, hogy a kép 1-es z-index számot kapott, míg a szöveg 2-es értéket, mivel a szöveg nagyobb z-index számmal rendelkezik, mint a kép, így szöveg helyezkedik el legfelül.

Példa három z-index-re pozitív és negatív értékekkel

HTML kód

<img src="https://webiskola.hu/kiskep.jpg" style="position:absolute; z-index:-1;">
<p style="position: relative; z-index: 0; color: red;">z-index</p>
<p style="position: relative; z-index: 1; background-color: yellow;">z 2</p>
Code language: HTML, XML (xml)

Eredmény

kiskep

z-index

z 2



>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ebben a példában már három HTML elemet használtunk, amikre alkalmaztuk a z-index-et. Volt köztük olyan, ami negatív értéket kapott és volt olyan, ami pozitív értéket. Láthatjuk, hogy így is tökéletesen működik, a legnagyobb z-index számmal rendelkező HTML elem kerül legfelülre, míg a legkisebb z-index értékkel rendelkező, – ami jelen esetben egy negatív érték – legalulra.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!