Mindig küzdöttem a CSS tulajdonság z-indexével. Eleinte olyan könnyen hangzik. A magasabb z-index értékű elemek az alacsonyabb z-index értékűek előtt jelennek meg. Ennek ellenére sokszor kerültem olyan helyzetekbe, ahol úgy tűnik, hogy a z-index értéknek egyáltalán nem volt hatása.
Úgy döntöttem, hogy elegem van a z-index próbáiból és hibáiból, és szeretnék jobban megérteni. Remélem, hogy ez a cikk segíthet Önnek, így soha nem fog csodálkozni azon, hogy a z-index miért nem azt csinálja, amit elvár.
Alapértelmezett halmozási sorrend
Először is említsük meg az alapértelmezett sorrendet, amelyben a böngésző elemeit halmozza, ha nem alkalmaznak z-indexet:
- Gyökérelem (az elem)
- A nem pozicionált elemek a meghatározott sorrendben
- Az elemek a meghatározott sorrendben helyezkednek el
A nem pozícionált elem az alapértelmezett helyzetértékű statikus elem. A pozicionált elem bármely más pozícióértékkel rendelkező elem. Példák egyéb értékekre: abszolút, relatív, ragadós vagy rögzített.
HTML:
CSS:
/* This is only the CSS that is relevant for the example. For the complete CSS check the links below the pictures. */.blue, .pink, .orange { position: absolute;}
A zöld mezőt utoljára definiáltuk a dokumentumban. Ennek ellenére azért jelenik meg a többiek mögött, mert nincs pozicionálva.
Halmozás z-indexszel
Ha most meg akarjuk változtatni ezen elemek halmozási sorrendjét, használhatjuk a z-index tulajdonságot. Magasabb z indexű elem jelenik meg egy alacsonyabb z indexű elem előtt. Egy dolgot meg kell jegyezni, hogy a z-index csak pozicionált elemekkel működik .
.blue, .pink, .orange { position: absolute;}.blue { z-index: 2;}.orange { z-index: 3;}.green { z-index: 100; // has no effect since the green box is non- positioned}
A magasabb z-indexű narancssárga doboz a kék mező előtt jelenik meg.
Halmozási kontextus
Tegyük fel, hogy hozzáadunk egy másik elhelyezett mezőt az elrendezéshez, amelyet a rózsaszín mező mögé akarunk helyezni. Kódunkat a következőkre frissítjük:
HTML:
CSS:
.blue, .pink, .orange, .purple { position: absolute;}.purple { z-index: 0;}.pink { z-index: 1;}.blue { z-index: 2;}.orange { z-index: 3;}.green { z-index: 100;}
A rózsaszínű dobozunk a vártnak megfelelően jelenik meg a lila doboz előtt, de mi történt a narancssárga dobozkal? Miért van hirtelen a kék mögött, annak ellenére, hogy magasabb a z-indexe? Ennek az az oka, hogy egy elemhez hozzáadva egy z-index értéket kialakul az úgynevezett halmozási kontextus .
A rózsaszínű mezőnek az auto-tól eltérő z-index értéke van, amely új halmozási kontextust alkot. Az a tény, hogy egymásra helyezi a kontextust, befolyásolja a gyermekelemek megjelenítését.
Lehetőség van a rózsaszínű doboz gyermek elemek egymásra helyezésének sorrendjére. Azonban z-indexüknek csak jelentése van ebben a halmozási kontextusban . Ez azt jelenti, hogy a narancssárga mezőt nem tudjuk áthelyezni a kék mező elé, mert azok már nem ugyanazon a veremkörnyezeten belül vannak.
Ha azt akarjuk, hogy a kék és a narancssárga doboz ugyanazon a halmozási kontextusban legyen, akkor a kék mezőt definiálhatjuk a rózsaszínű doboz gyermekelemeként. Ezáltal a kék mező megjelenik a narancssárga mögött.
A halmozási összefüggések nem csak akkor jönnek létre, amikor a z-indexet egy elemre alkalmazzák. Számos olyan tulajdonság létezik, amelyek miatt az elemek egymásra helyezési összefüggéseket hoznak létre. Néhány példa: szűrés, átlátszatlanság és transzformáció.
Térjünk vissza az előző példánkra. A kék doboz ismét testvére a rózsaszínű doboznak. Ezúttal ahelyett, hogy a rózsaszínű mezőhöz z-indexet adnánk, szűrőt alkalmazunk rá.
HTML:
CSS:
.blue, .pink, .orange { position: absolute;}.pink { filter: hue-rotate(20deg);}.blue { z-index: 2;}.orange { z-index: 3;}.green { z-index: 100;}
A narancssárga doboz z-indexe még mindig magasabb, mint a kéké, de továbbra is megjelenik mögötte. Ennek oka, hogy a szűrő értéke miatt a rózsaszínű mező új egymásra helyezési kontextust alkotott.
Összegzés
A z-index használatával a pozicionált elemeken megváltoztathatjuk az alapértelmezett halmozási sorrendet.
Bizonyos CSS tulajdonságok alkalmazásakor egy elem egymásra épülő kontextust alkothat. A Z-index értékeknek csak ugyanabban a halmozási környezetben van jelentése.
További információkért a z-indexről ajánlom ezt a cikket. Nagyon sok ihletet kaptam belőle, amikor ezt írtam.
Köszönöm, hogy elolvasta! :)