Átfedő elemek elhelyezése lépcsős stíluslapokkal
Az egyik kihívás, ha a CSS pozícionálást használja a weboldal elrendezéséhez, hogy egyes elemei átfedhetnek másokat. Ez jól működik, ha azt szeretné, hogy a HTML legutolsó eleme legyen a tetején, de mi van, ha nem vagy mi, ha olyan elemeket szeretne, amelyek jelenleg nem átfedik egymást, mert ezt a "réteges" megjelenést ? Annak érdekében, hogy megváltoztassuk az elemek átfedését, a CSS tulajdonságait kell használni.
Ha grafikus eszközöket használt Word és PowerPoint vagy erőteljesebb képszerkesztőben, például az Adobe Photoshop programban, akkor valószínű, hogy valami olyasmit lát, mint a z-index. Ezekben a programokban kijelölheti a rajzolt objektumokat, és kiválaszthat egy lehetőséget a "Küldés vissza" vagy "Hozd el a frontra" a dokumentum egyes elemeihez. A Photoshopban nincsenek ezek a funkciók, de a program "Réteg" ablaktáblájával rendelkezik, és elrendezheti, hogy egy elem a vászonba kerüljön átrendezve ezeket a rétegeket. Mindkét példa esetében lényegében az objektumok z-indexét állítjuk be.
Mi az a z-index?
Ha CSS-pozícionálást használ az oldal elemeinek elhelyezése érdekében, akkor három dimenzióban kell gondolkodnia. A két szabványos méret: bal / jobb és felső / alsó. A balról jobbra mutató index az x-indexként ismert, míg az alulról felfelé az egyik az y-index. Így állíthatja be az elemeket vízszintesen vagy függőlegesen, a két index használatával.
Amikor megjelenik a webdesign, ott van az oldal halmozási sorrendje is. Az oldal minden egyes elemét bármely más elem felett vagy alatt lehet rétegezni. A z-index tulajdonság határozza meg, hogy a veremben mely elemek vannak. Ha az x-index és az y-index a vízszintes és a függőleges vonalak, akkor a z-index az oldal mélysége, lényegében a 3. dimenzió.
Szeretek a weblapon található elemeket mint papírdarabokat, és a weblapot kollázsként gondolni. Ahol elhelyezem a papírt a pozícionálással határozzák meg, és hogy mekkora részét fedezi a többi elem, a z-index.
A z-index egy pozitív (pl. 100) vagy negatív szám (pl. -100). Az alapértelmezett z-index 0. A legmagasabb z-indexű elem a tetején van, ezt követi a következő legmagasabb és így tovább a legalacsonyabb z-index. Ha két elemnek ugyanaz a z-index értéke van (vagy nincs definiálva, azaz az alapértelmezett 0 értéket használja), akkor a böngésző a HTML-ben megjelenő sorrendben rétegezi azokat.
A z-index használata
Adjon minden egyes elemet a veremben egy másik z-index értékhez. Például, ha öt különböző elemem van:
- 1. elem - z-index -25
- elem 2 - z-index 82
- elem 3 - z-index nincs beállítva
- elem 4 - z-index 10
- elem 5 - z-index -3
A következő sorrendben rendeződnek:
- 2. elem
- 4. elem
- 3. elem
- 5. elem
- elem 1
Nagyon különböző z-index értékeket használok az elemek összeragasztásához. Így, ha további elemeket ad hozzá az oldalhoz később, akkor van hely arra, hogy rétegezze őket anélkül, hogy ki kellene állítania az összes többi elem z-index értékét. Például:
- 100 az én legfontosabb elememért
- 0 a középső elememhez
- -100 az alsó elememhez
Két elem ugyanazt a z-index értéket adhatja meg. Ha ezek az elemek halmozódnak, megjelenik a HTML-ben írt sorrendben, az utolsó elem a tetején.
Egy olyan megjegyzés, amely egy elemet hatékonyan használ a z-index tulajdonságra, egy blokkszintű elemnek kell lennie, vagy egy "blokk" vagy "inline-block" megjelenítést kell használnia a CSS-fájlban.
Jennifer Krynin eredeti cikke. Szerkesztette: 12/09/16 by Jeremy Girard.