Z-indeks i CSS

Placering af overlappende elementer med kaskadeformatark

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 et grafikværktøj i Word og PowerPoint eller mere robust billedditor 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 panelet "Layer" i programmet, og du kan arrangere, hvor et element falder i 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-indekset?

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.

Jeg kan godt lide at tænke på elementerne på en webside som stykker papir, og selve websiden som en collage. Hvor jeg 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 (f.eks. 100) eller negativt (f.eks. -100). Standard z-indekset er 0. Elementet med det højeste z-indeks er øverst efterfulgt af det næsthøjeste og så videre ned til det 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 jeg har fem forskellige elementer:

De stabler i følgende rækkefølge:

  1. element 2
  2. element 4
  3. element 3
  4. element 5
  5. element 1

Jeg anbefaler 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:

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 et element til effektivt at bruge z-indeksegenskaben, skal det være et blokniveauelement eller bruge en visning af "blok" eller "inline-blok" i din CSS-fil.

Originalartikel af Jennifer Krynin. Redigeret den 12/09/16 af Jeremy Girard.