Viena no problēmām, izmantojot CSS pozicionēšanu tīmekļa lapas izkārtojumam, ir tas, ka daži no jūsu elementiem var pārklāt citus. Tas darbojas pareizi, ja vēlaties, lai pēdējais HTML elements būtu uz augšu, bet kas, ja jums nav vai kas, ja vēlaties, lai elementi, kas šobrīd nepārklājas, to darītu, jo dizains prasa šo "slāņu" izskatu ? Lai mainītu elementu pārklāšanos, jums jāizmanto CSS īpašums.
Ja esat izmantojis grafikas rīkus programmā Word un PowerPoint vai spēcīgākam attēlu redaktoram, piemēram, Adobe Photoshop, tad, iespējams, jūs esat redzējis kaut ko tādu kā z-index darbībā. Šajās programmās varat izcelt objektus, kurus esat izveidojis, un izvēlieties opciju "Sūtīt atpakaļ" vai "Atseviet uz priekšu" noteiktus dokumenta elementus. Photoshopā jums nav šo funkciju, taču jums ir programmas "Layer" rūts, un jūs varat noorganizēt vietu, kurā elements iekrīt uz auduma, pārkārtojot šos slāņus. Abos šajos piemēros jūs būtībā iestatāt šo objektu z-indeksu.
Kas ir Z-Index?
Kad jūs izmantojat CSS pozicionēšanu, lai novietotu lapas elementus, jums ir jādomā trīs aspektos. Ir divi standarta izmēri: pa kreisi / pa labi un augšā / apakšā. Indekss pa kreisi uz labo tiek saukts par x-indeksu, savukārt no augšas līdz apakšai ir y-indekss. Tādējādi jūs novietojat elementus horizontāli vai vertikāli, izmantojot šos divus indeksus.
Runājot par tīmekļa dizaina izstrādi, ir arī lapas sakraušana. Katrs lapas elements var būt slāņains virs vai zem jebkura cita elementa. Īpašuma z-indekss nosaka, kur katrā kaudzē ir katrs elements. Ja x-indekss un y-indeks ir horizontālās un vertikālās līnijas, tad z-indekss ir lapas dziļums, būtībā 3. dimensija.
Padomājiet par elementiem tīmekļa lapā kā uz papīra gabaliņiem un pašu tīmekļa lapu kā kolāžu. Ja jūs novietojat papīru, tas tiek noteikts pēc atrašanās vietas, un cik lielu daļu no citiem elementiem sedz z-indekss.
- Z-indekss ir skaitlis, vai nu pozitīvs (piemēram, 100), vai negatīvs (piemēram, -100).
- Noklusējuma z-indekss ir 0.
Elements ar augstāko z-indeksu ir augšā, pēc tam nākamais augstākais un tā tālāk uz zemāko z-indeksu. Ja diviem elementiem ir vienāds z-indeksa lielums (vai tas nav definēts, tas nozīmē, ka izmantojiet noklusējuma vērtību 0), pārlūks slāņa tos secībā, kādā tie parādās HTML.
Kā lietot Z-Index
Norādiet katram elementam, ko vēlaties savai kaudzītei, citu z-indeksa vērtību. Piemēram, ja jums ir pieci dažādi elementi:
- elements A - z-indekss -25
- elements B - z-indekss 82
- elements C - z-index nav iestatīts
- elements D - z-index of 10
- elements E - z-indekss -3
Tās tiks sakārtotas šādā secībā:
- elements B
- elements D
- elements C
- elements E
- elements A
Lai elementus sakļautu, ieteicams izmantot ievērojami atšķirīgas z-indeksa vērtības. Tādā veidā, ja vēlāk pievienosiet vairākus elementus, jūs varat ievietot tos, nemainot visu citu elementu z-indeksa vērtības. Piemēram:
- 100 jūsu visaugstāko elementu
- 0 jūsu vidēja elementa
- -100 jūsu apakšējā elementā
Jūs varat arī piešķirt diviem elementiem tādu pašu z-indeksa vērtību. Ja šie elementi ir sakrauti, tie tiks parādīti tādā secībā, kā tie ir rakstīti HTML formātā, un pēdējais elements ir augšā.
Viena piezīme: elementam, lai efektīvi izmantotu z-indeksa īpašību, tam jābūt bloķēšanas līmeņa elementam vai arī izmantojiet "bloka" vai "inline-block" displeja jūsu CSS failā.
