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ál Word és PowerPoint, vagy egy erőteljesebb képszerkesztő, például az Adobe Photoshop, akkor esélye van látni valami hasonló z-index akcióban. 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 Photoshop-ban nincsenek ezek a funkciók, de a program "Réteg" ablaktáblájával rendelkezik, és elrendezheti, hogy egy elem a vászonra esik át, á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 a web design, van még a rendezési sorrend az oldal. 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ó.
Gondoljon az elemek egy weboldalon, mint papírdarabokat és a weblapot, mint kollázst. Ahol elhelyezi a papírt a pozícionálással határozza meg, és hogy a többi elem milyen mértékben fedezi a z-indexet.
- A z-index egy pozitív (például 100) vagy negatív (például -100) szám.
- 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ő eleme van:
- A-z-index -25
- B elem - z-index 82
- elem C - z-index nincs beállítva
- D - z - index 10
- elem E - z-index -3
A következő sorrendben rendeződnek:
- B elem
- D elem
- C elem
- E elem
- A elem
Nagyon különböző z-index értékeket kell használni 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 legmagasabb eleméhez
- 0 a középső elemhez
- -100 az Ön alsó eleméhez
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 megjegyzés: egy elem számára, amely hatékonyan használja a z-index tulajdonságot, egy blokkszintű elemnek kell lennie, vagy egy "blokk" vagy "inline-block" megjelenítést kell használnia a CSS-fájlban.
