CSS a vadonban: Google térkép

Szeretném megmutatni egy valós példán, hogy hogyan lehet z-indexszel CSS-ben pozicionálni. A példa a Google Térkép lesz. Valószínűleg sokan használjátok a Google Térképet vagy valamilyen online térkép szolgáltatást, hogy megtaláljátok azt a helyet, amit kerestek. Ezek remek dolgok. Körbenézhetünk, belenagyíthatunk, eltávolodhatunk, és rákereshetünk helyekre. Most épp Barcelonában vagyok, úgyhogy rákeresek a Sagrada Familiára, ami egy gyönyörű templom. Amit itt látsz, az HTML, CSS és JavaScript. Megmutatom, milyen z-indexek vannak itt. Minden elemet, amit látsz CSS segítségével pozícionáltak, hogy egymásra kerüljenek, és egy specifikus z-index tulajdonságot használtak ahhoz, hogy mind megfelelő sorrendben kerüljenek egymásra. Várj csak, a Chrome fejlesztői eszközök segítségével megmutatok egy pár dolgot ezzel kapcsolatban. Ennek a sarokban lévő minitérképnek az abszolút pozíciója alul 0, bal oldalon 0, a z-indexe pedig 1. Ezért ez rákerül azokra az elemekre, amiknek a z-indexe nulla. Ennek a context-menünek – aminél látszik néhány lehetőség – a position értéke fixed, a z-indexe pedig 10. Ezért ez sok más dolog felett jelenik meg. A nagyító gombnak a z-indexe 2, ami azt jelenti, hogy a felugró kártya alatt jelenik meg. Menjünk most egy kicsit odébb, és nézzük meg mi történik. Látod? A felugró kártya a nagyító felett jelenik meg. Ez azért van, mert ennek a z-indexe 4, a nagyító gomb z-indexe pedig 2. A Google Térkép sok-sok CSS pozíciót és z-indexet használ arra, hogy elrendezze a térképet és meghatározza, mi kerül egymásra. Emellett sok más CSS és JavaScript dolgot is csinál, de egyelőre az is nagyon jó, ha kezded megérteni hogyan épülnek fel az olyan weboldalak, amik teljesen eltérnek azoktól, amiket eddig néztünk. Pontosan ebben van a CSS igazi ereje!