Kako uporabljati Z-indeks v CSS

Postavljanje prekrivajočih se elementov s kaskadnimi slogovnimi listi

Ozadje sodobne umetnosti

axllll / iStock Vectors / Getty Images





Eden od izzivov pri uporabi CSS pozicioniranje za postavitev spletne strani je, da lahko nekateri vaši elementi prekrivajo druge. To dobro deluje, če želite zadnji element v HTML biti na vrhu, a kaj, če tega ne storite ali kaj, če želite imeti elemente, ki trenutno ne prekrivajo drugih, da bi to storili, ker dizajn to zahteva 'plastesti' videz ? Če želite spremeniti način prekrivanja elementov, morate uporabiti lastnost z-index CSS.

Če ste uporabljali grafična orodja v Wordu in PowerPointu ali robustnejši urejevalnik slik, kot je npr Adobe Photoshop , potem je velika verjetnost, da ste videli nekaj podobnega z-indeksu v akciji. V teh programih lahko označite predmete, ki ste jih narisali, in izberete možnost Pošlji nazaj oz Pripelji spredaj določene elemente vašega dokumenta. V Photoshopu nimate teh funkcij, imate pa podokno »Sloj« v programu in lahko s preurejanjem teh slojev uredite, kam element pade na platno. V obeh teh primerih v bistvu nastavljate z-indeks teh predmetov.



Kaj je Z-indeks?

Ko uporabljate pozicioniranje CSS za pozicioniranje elementov na strani, morate razmišljati v treh dimenzijah. Obstajata dve standardni dimenziji: levo/desno in zgoraj/spodaj. Indeks od leve proti desni je znan kot x-indeks, medtem ko je indeks od zgoraj navzdol y-indeks. Tako bi postavili elemente vodoravno ali navpično z uporabo teh dveh indeksov.

Ko gre za oblikovanje spletnih strani , obstaja tudi vrstni red zlaganja strani. Vsak element na strani je lahko plast nad ali pod katerim koli drugim elementom. Lastnost z-index določa, kje v skladu je posamezen element. Če sta x-index in y-index vodoravna in navpična črta, potem je z-index globina strani, v bistvu 3. dimenzija.



Predstavljajte si elemente na spletni strani kot koščke papirja in samo spletno stran kot kolaž. Kam položite papir, je določeno s položajem, in koliko papirja pokrivajo drugi elementi, je z-indeks.

  • Indeks z je število, ki je lahko pozitivno (npr. 100) ali negativno (npr. -100).
  • Privzeti indeks z je 0.

Element z najvišjim indeksom z je na vrhu, sledi mu naslednji najvišji in tako naprej do najnižjega indeksa z. Če imata dva elementa enako vrednost z-indeksa (ali ni definirana, kar pomeni, da uporabite privzeto vrednost 0), ju bo brskalnik razvrstil v vrstnem redu, kot sta prikazana v HTML-ju.

Kako uporabljati Z-indeks

Vsakemu elementu, ki ga želite v skladu, dajte drugačno vrednost z-indeksa. Na primer, če imate pet različnih elementov:

  • element A — z-indeks -25
  • element B — z-indeks 82
  • element C — z-indeks ni nastavljen
  • element D — z-indeks 10
  • element E — z-indeks -3

Zloženi bodo v naslednjem vrstnem redu:



  1. element B
  2. element D
  3. element C
  4. element E
  5. element A

Priporočljivo je, da za zlaganje elementov uporabite zelo različne vrednosti indeksa z. Če na ta način pozneje dodate več elementov na stran, imate prostor za njihovo plastenje, ne da bi morali prilagajati vrednosti z-indeksa vseh drugih elementov. Na primer:

  • 100 za vaš najvišji element
  • 0 za vaš srednji element
  • -100 za vaš spodnji element

Dvema elementoma lahko dodelite tudi enako vrednost indeksa z. Če so ti elementi zloženi, bodo prikazani v vrstnem redu, kot so zapisani v HTML, z zadnjim elementom na vrhu.



Da element učinkovito uporablja lastnost z-index, mora biti element na ravni bloka ali mora v vaši datoteki CSS uporabljati prikaz 'block' ali 'inline-block'.