CSS z-index

A z-index tulajdonság segítségével szabályozhatjuk, hogy mely elemek jelenjenek meg más elemek előtt vagy mögött a képernyőn. Ez a rétegezés kulcsfontosságú a komplex felületek kialakításában.

A z-index alapjai

A z-index értékek meghatározzák az elemek egymáshoz viszonyított sorrendjét a rétegek között. Csak olyan elemeknél működik, amelyeknél a position nem static.

Érték	Leírás
auto	Az elem a szülő elem rétegződési sorrendjét örökli.
0, 1, 10, ...	Pozitív értékek esetén az elem előrébb kerül a rétegződésben.
-1, -10, ...	Negatív értékek esetén az elem hátrébb kerül a rétegződésben.

Példa a z-index használatára

Ebben a példában két doboz egymásra helyezkedik. A z-index határozza meg, melyik látszik felül.

A kék doboz z-index: 1 értéket kapott, míg a piros doboz z-index: 2 értékkel felülre került.

Stacking context (rétegezési környezet)

A stacking context határozza meg, hogyan rendeződnek az elemek egymás fölé. Új stacking context jön létre például, ha egy elem position értéket és z-index-et kap, vagy bizonyos CSS tulajdonságokat (például opacity < 1) használunk.

Az alábbi példában a szülő elem stacking context-et hoz létre, így a gyerekeinek z-index értékei csak ezen belül érvényesek.

Gyakorlati használat

A z-index gyakran kerül elő felugró ablakok, menük, modálok vagy tooltipek esetében. Ha egy menü egy másik elem mögött jelenik meg, a z-index segítségével előre hozható.

Tippek a z-index használatához

A z-index megfelelő használata segít elkerülni a váratlan átfedéseket és biztosítja a vizuális hierarchiát.

Mindig ellenőrizd, hogy az elem rendelkezik-e position tulajdonsággal (pl. relative, absolute, fixed).
Kerüld a túl magas vagy véletlenszerű értékek használatát, mert átláthatatlanná válhat a layout.
Használj logikus rétegezési rendszert a konzisztens elrendezés érdekében.