<< 6.6. Dinamikus tartalom

6.8. Az egérkurzor pozíciójának meghatározása >>

6.7. Elemek egymásra helyezése

A top és left tulajdonságok segítségével, a böngészőablak két dimenzióját tekintve, az elemeket gyakorlatilag bárhova elhelyezhetjük. Annak ellenére, hogy a megjelenítés két fizikai dimenzióra korlátozott, lehetőségünk van a harmadik dimenzió érzetének keltésére, ha az elemeket egymásra helyezzük, akárcsak a grafikus felületen a különböző ablakokat. Amennyiben több elem ugyanazt a helyet foglalja el a dokumentumban, ezek közül csak egyet tekintünk „legfelsőnek”, és ez lesz megjelenítve. A felső elem elrejti az alatta elhelyezkedő elemeknek azt a részét, amelyek fölé van helyezve. Az elemeknek ebben a harmadik dimenzióban történő elrendezését az elem z-index attribútuma határozza meg. Az az elem, amelyiknek a z-index attribútumértéke nagyobb, mint egy ugyanazon a helyen elhelyezett másik elemé, a kisebb z-index-ű elem fölött fog elhelyezkedni, gyakorlatilag elrejtve azt. A z-index attribútumnak megfelelő JavaScript tulajdonság neve zIndex.

A következő példa három képet jelenít meg úgy, hogy azok részben átfedik egymást. Az XHTML leírásban mindegyik képnek megfelelő img elemnek van egy onclick attribútuma, melynek hatására egy JavaScript függvény fog meghívódni. A függvény előbb meghatározza a régi- illetve új „legfelső kép” DOM-beli címét. Ezt követően a függvény a két kiválasztott elem zIndex értékét módosítja úgy, hogy a régi legfelső elemé 0, az őjé pedig 10 lesz, és ezzel az új elem valóban legfelülre kerül. A script a topImg globális változóban jegyzi meg, hogy melyik az aktuális legfelső elem, és ezt az értéket aktualizálja, valahányszor egy új elem kerül legfelülre a toTop függvényhívás által.

Megfigyelhetjük, hogy a zIndex érték egy karaktersor, akárcsak a többi tulajdonság. A stacking.html nevű dokumentum és a hozzá tartozó JavaScript állomány a következő:

A 6.9. ábra a stacking.html dokumentumot jeleníti meg:

Ugrás az oldal tetejére