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
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
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.
