Pārklājošo elementu novietošana ar kausējošām stila lapām
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 audeklā, pārkārtojot šos slāņus. Abos šajos piemēros jūs būtībā iestatāt šo objektu z-indeksu.
Kas ir z-indekss?
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.
Kad runa ir par tīmekļa dizaina izstrādi, ir arī lapas krāvumu secība. 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.
Man patīk domāt par tīmekļa lapas elementiem kā papīra gabaliņiem un pašu lapu kā kolāžu. Kur es novietoju papīru, nosaka pozicionēšana, 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. Augšā ir elements ar augstāko z-indeksu, pēc tam seko nākamais lielā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-indeksu
Norādiet katram elementam, ko vēlaties savai kaudzītei, citu z-indeksa vērtību. Piemēram, ja man ir pieci dažādi elementi:
- elements 1 - z-indekss -25
- elements 2 - z-indekss 82
- elements 3 - z-index nav iestatīts
- elements 4 - z-indekss 10
- elements 5 - z-indekss -3
Tās tiks sakārtotas šādā secībā:
- 2. elements
- 4. elements
- elements 3
- elements 5
- 1. elements
Ieteicams izmantot ievērojami atšķirīgas z-indeksa vērtības, lai sakārtotu savus elementus. 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 manai visaugstākajam elementam
- 0 manam vidējam elementam
- -100 par manu apakšējo elementu
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 CSS failā jāizmanto "bloka" vai "inline-block" displejs.
Jennifera Krīnina oriģinālais raksts. Rediģēja 16.12.09., Jeremijs Girards.