En af udfordringerne ved brug af CSS-positionering til websidelayout er, at nogle af dine elementer kan overlappe andre. Dette virker fint, hvis du vil have det sidste element i HTML'et på toppen, men hvad hvis du ikke gør det eller hvad hvis du vil have elementer, som i øjeblikket ikke overlapper andre til at gøre det, fordi designet kalder dette "lagdelt" look ? For at ændre måden, som elementer overlapper, skal du bruge CSS 'egenskab.
Hvis du har brugt grafikværktøjer i Word og PowerPoint eller et mere robust billedredigeringsprogram som Adobe Photoshop, så er chancerne for, at du har set noget som z-indeks i aktion. I disse programmer kan du fremhæve det eller de objekter, du har tegnet, og vælg en mulighed for at "Send til tilbage" eller "Bring til front" visse elementer i dit dokument. I Photoshop har du ikke disse funktioner, men du har "Layer" -panelet i programmet, og du kan arrangere, hvor et element falder på lærredet ved at omarrangere disse lag. I begge disse eksempler er du i bund og grund indstillet z-indekset for disse objekter.
Hvad er Z-Index?
Når du bruger CSS-positionering til at placere elementer på siden, skal du tænke i tre dimensioner. Der er de to standard dimensioner: venstre / højre og top / bottom. Venstre til højre indeks er kendt som x-indekset, mens øverste til nederste er y-indekset. Sådan placerer du elementer horisontalt eller vertikalt ved hjælp af disse to indekser.
Når det kommer til webdesign, er der også stackingsordren på siden. Hvert element på siden kan lagdelt over eller under ethvert andet element. Z-indeksegenskaben bestemmer, hvor i stakken hvert element er. Hvis x-indeks og y-indeks er de vandrette og lodrette linjer, er z-indekset dybden på siden, i det væsentlige den tredje dimension.
Tænk på elementerne på en webside som stykker papir og selve websiden som en collage. Hvor du lægger papiret bestemmes af positionering, og hvor meget af det er dækket af de andre elementer er z-indekset.
- Z-indekset er et tal, enten positivt (for eksempel 100) eller negativt (for eksempel -100).
- Standard z-indekset er 0.
Elementet med den højeste z-indeks er øverst efterfulgt af den næsthøjeste og så videre ned til den laveste z-indeks. Hvis to elementer har samme z-indeksværdi (eller den ikke er defineret, hvilket betyder brugen af standardværdien på 0), lagrer browseren dem i den rækkefølge, de vises i HTML'en.
Sådan bruges Z-indeks
Giv hvert element du vil have i din stak en anden z-indeksværdi. For eksempel, hvis du har fem forskellige elementer:
- element A - z-indeks på -25
- element B - z-indeks på 82
- element C - z-indeks ikke angivet
- element D - z-indeks på 10
- element E - z-indeks på -3
De stabler i følgende rækkefølge:
- element B
- element D
- element C
- element E
- element A
Det anbefales at bruge meget forskellige z-indeksværdier for at stable dine elementer. På den måde, hvis du tilføjer flere elementer til siden senere, har du mulighed for at lagre dem uden at skulle justere z-indeksværdierne for alle de andre elementer. For eksempel:
- 100 til dit topelement
- 0 til dit midterste element
- -100 for dit bundelement
Du kan også give to elementer den samme z-indeksværdi. Hvis disse elementer er stablet, vises de i den rækkefølge, de er skrevet i HTML, med det sidste element ovenpå.
En note: For at et element skal kunne bruge z-indeksegenskaben, skal det være et blokniveauelement eller bruge en visning af "blok" eller "inline-blok" i din CSS-fil.
