En av utfordringene ved bruk av CSS-posisjonering for websidelayout er at noen av elementene dine kan overlappe andre. Dette fungerer fint hvis du vil at det siste elementet i HTML-en skal være på toppen, men hva hvis du ikke gjør det eller hva om du vil ha elementer som for tiden ikke overlapper andre, fordi designet krever dette "lagdelte" utseendet ? For å endre måten elementene overlapper, må du bruke egenskapen til CSS.
Hvis du har brukt grafikkverktøy i Word og PowerPoint eller et mer robust bilderedigeringsprogram som Adobe Photoshop, så har du sjansen til å se noe som z-indeks i aksjon. I disse programmene kan du markere objektet / objektene du har tegnet, og velg et alternativ til "Send to back" eller "Bring to front" visse elementer i dokumentet. I Photoshop har du ikke disse funksjonene, men du har "Layer" -panelet i programmet, og du kan ordne hvor et element faller på lerretet ved å omorganisere disse lagene. I begge disse eksemplene setter du i hovedsak z-indeksen for disse objektene.
Hva er Z-indeksen?
Når du bruker CSS-posisjonering til å plassere elementer på siden, må du tenke i tre dimensjoner. Det er de to standarddimensjonene: venstre / høyre og topp / bunn. Den venstre til høyre indeksen kalles x-indeksen, mens topp til nederst er y-indeksen. Slik plasserer du elementer horisontalt eller vertikalt, ved hjelp av disse to indeksene.
Når det gjelder webdesign, er det også stablingsordren på siden. Hvert element på siden kan lagres over eller under et annet element. Z-indeksegenskapen bestemmer hvor i stakken hvert element er. Hvis x-indeks og y-indeks er de horisontale og vertikale linjene, er z-indeksen dybden på siden, hovedsakelig den tredje dimensjonen.
Tenk på elementene på en nettside som stykker papir og selve nettsiden som en collage. Hvor du legger papiret bestemmes av posisjonering, og hvor mye av det dekkes av de andre elementene er z-indeksen.
- Z-indeksen er et tall, enten positivt (f.eks. 100) eller negativt (for eksempel -100).
- Standard z-indeksen er 0.
Elementet med høyest z-indeks er på toppen, etterfulgt av den nest høyeste og så videre ned til den laveste z-indeksen. Hvis to elementer har samme z-indeksverdi (eller den ikke er definert, som betyr bruken av standardverdien på 0), vil nettleseren lagre dem i rekkefølgen de vises i HTML-koden.
Slik bruker du Z-indeksen
Gi hvert element du vil ha i stabelen din en annen z-indeksverdi. For eksempel, hvis du har fem forskjellige elementer:
- element A - z-indeks på -25
- element B - z-indeks på 82
- element C - z-indeks ikke satt
- element D - z-indeks på 10
- element E - z-indeks på -3
De vil stable i følgende rekkefølge:
- element B
- element D
- element C
- element E
- element A
Det anbefales å bruke mye forskjellige z-indeksverdier for å stable elementene dine. På den måten, hvis du legger til flere elementer på siden senere, har du plass til å lagre dem uten å måtte justere z-indeksverdiene for alle de andre elementene. For eksempel:
- 100 for toppelementet ditt
- 0 for mellomelementet ditt
- -100 for bunnelementet ditt
Du kan også gi to elementer den samme z-indeksverdien. Hvis disse elementene er stablet, vises de i den rekkefølgen de er skrevet i HTML, med det siste elementet på toppen.
Ett notat: for et element for å effektivt bruke z-indeksegenskapen, må det være et blokknivåelement eller bruk en visning av "blokk" eller "inline-blokk" i CSS-filen.
