Átfedési kontextusok vagy amikor a z-index nem működik
Nem alkotom az első oldalt, de először szembesültem ezzel a problémával. Az egyik formatervezési mintában meg kellett változtatnom a katalógus menüjét. Kezdetben egy szinttel rendelkező menüt használtak, de az ügyfelek üzleti tevékenysége nőtt, és egy tipikus legördülő többszintű menüt kellett végrehajtania. "Nem probléma!" - gondoltam, és gyorsan kezdtem rajzolni további stílusokat jelöléssel. Az idő nem sokat vett ehhez, de az első teszt sikertelen volt. A menüszintek megjelentek a szándék szerint, de valamilyen okból kifolyólag az oldal központi részének elemei fedtek le.
- Hé! - villant a fejembe. Valószínűleg az egyik stílus hiányzik a "z-index" tulajdonság, amely lehetővé teszi a pozícionált elemek átfedésének sorrendjét az oldalon. Kezdte hozzá a "z-indexet", és semmi jó nem jött rá. Bármilyen értéket, amelyet nem adtam hozzá, az oldal középpontjának elemei továbbra is lefedték az étlapot.
A kétértelmű z-index
Úgy tűnik, hogy bonyolult lehet a z-indexrel? Mindenki tudja, hogy az oldalakon elhelyezett elemek átfedhetnek. Az átfedés sorrendjének kezelése csak a "z-index" tulajdonságot teszi lehetővé. Ha például két olyan elem van, amelynek z-index értéke 5 és 10, akkor az utolsó megjelenik az előtérben, mert tíz több mint öt, és még közelebb van. Ha a "z-index" tulajdonság nincs megadva, az átfedés sorrendjét a dokumentumban szereplő elemek sorrendje határozza meg.
Nincs komplikáció, amíg mélyebbre nem ásunk. Az első nehézségek akkor kezdődnek, amikor megjelenik az úgynevezett overlay-kontextusok. Egy átfedés kontextusában azokat az elemeket értjük, amelyekben a közös szülők elöl vagy hátul helyezkednek el.
Az overlay kontextus gyökér eleme. Például van valami
amelyre az átfedés kontextusát definiáljuk. Ezért minden gyermeke az átfedés azonos kereteibe esik.
Itt jön a szórakoztató rész. Az átfedési kontextusok nem keresztezik egymást. Ha az elemet egy kontextus legvégén rendezzük, akkor nem derül ki a szomszédos környezet eleme felett. A "z-index" értékének a legértékesebb számokra való átállítása nem fogja eredményezni a várt hatást.
Amikor új overlay kontextus alakul ki
A specifikáció több feltételt határoz meg az overlay kontextus kialakításához:
Előretekintve azt fogom mondani, hogy a feladat megoldásához csak a menü gyökérelemének átláthatóságát (opacitást) kellett hozzáadnia, és mindent el kellett dolgoznia, amint azt tervezték.
Az elemek megjelenítése egy átfedési környezetben
A fentiek jobb megértéséhez emlékezzen egyszer és mindenkorra az elemek megjelenítésének sorrendjére az átfedések egy összefüggésében (távolról a közelre).