Pagpahiluna sa Nag-overlap nga Mga Elemento gamit ang Mga Sheet sa Cascading Style
Usa sa mga hagit sa paggamit sa CSS positioning alang sa layout sa pahina sa web mao nga ang pipila sa imong mga elemento mahimo nga magsapaw sa uban. Maayo kini kung gusto nimo ang katapusan nga elemento sa HTML nga anaa sa ibabaw, apan unsa kung wala nimo o unsa kung gusto nimo nga adunay mga elemento nga karon wala mag-overlap sa uban nga buhaton tungod kay ang disenyo nanawagan niining "layered" nga hitsura ? Aron mausab ang paagi nga ang mga elemento nagsabak kinahanglan nimo gamiton ang propiedad sa CSS.
Kung gigamit nimo ang mga galamiton sa mga graphic sa Pulong ug PowerPoint o labaw pa ka maayo nga editor sa imahe sama sa Adobe Photoshop, kahigayunan nga nakita nimo ang usa ka butang sama sa z-index sa aksyon. Niini nga mga programa, mahimo nimo nga i-highlight ang (mga) butang nga imong gikuha, ug pilia ang usa ka kapilian nga "Ipadala ngadto sa likod" o "Dad-a sa atubangan" ang pipila nga mga elemento sa imong dokumento. Sa Photoshop, wala ka niini nga mga gimbuhaton, apan adunay "Layer" pane sa programa ug mahimo nimong hikayan kung diin ang usa ka elemento nahulog sa canvas pinaagi sa pag-usab sa mga layer. Sa duha niini nga mga panig-ingnan, imong gipatuman ang z-index sa mga butang.
Unsa ang z-index?
Sa diha nga ikaw naggamit sa CSS positioning aron sa pag-posisyon sa mga elemento sa panid, kinahanglan ka maghunahuna sa tulo ka mga sukod. Adunay duha ka sukaranang sumbanan: wala / tuo ug ibabaw / ubos. Ang wala sa tuo nga index nailhan nga x-index, samtang ang ibabaw ngadto sa ubos mao ang y-index. Mao kini ang paagi nga imong ibutang ang mga elemento sa pahigpit o vertikal, gamit kining duha ka mga index.
Sa diha nga moabut sa web design, anaa usab ang susama nga han-ay sa panid. Ang matag elemento sa panid mahimong layered sa ibabaw o ubos sa bisan unsang elemento. Ang z-index nga kabtangan nagtino kung asa anaa ang matag elemento. Kung ang x-index ug y-index mao ang pinahigda ug nagbarug nga mga linya, nan ang z-index mao ang giladmon sa panid, nga mao ang ikatulo nga dimensyon.
Ganahan kong hunahunaon ang mga elemento sa usa ka webpage ingon nga mga piraso sa papel, ug ang web page mismo ingon nga collage. Kung asa nako ibutang ang papel nahibal-an pinaagi sa pagpwesto, ug kung unsa kadaghan niini ang natabonan sa ubang mga elemento mao ang z-index.
Ang z-index usa ka numero, positibo (eg 100) o negatibo (eg -100). Ang default nga z-index mao ang 0. Ang elemento nga adunay labing taas nga z-index anaa sa ibabaw, nga gisundan sa sunod nga kinatas-an ug hangtud sa labing ubos nga z-index. Kon ang duha ka elemento adunay sama nga z-index nga bili (o wala kini gipasabut, nga nagpasabot nga ang paggamit sa default nga bili sa 0) ang browser mopapas kanila sa han-ay nga kini makita sa HTML.
Unsaon Paggamit sa z-index
Hatagi ang matag elemento nga imong gusto sa imong stack sa usa ka lainlaing bili sa z-index. Pananglitan, kon ako adunay lima ka managlahi nga elemento:
- elemento 1 - z-index sa -25
- element 2 - z-index sa 82
- Ang elemento 3 - z-index wala ibutang
- element 4 - z-index sa 10
- element 5 - z-index sa -3
Sila mosunod sa mosunod nga han-ay:
- element 2
- elemento 4
- elemento 3
- element 5
- elemento 1
Ginarekomendar ko ang paggamit sa dako kaayo nga lain-laing mga z-index nga mga mithi sa pagsumpo sa imong mga elemento. Nianang paagiha, kung ikaw makadugang sa daghang mga elemento sa panid sa ulahi, ikaw adunay kwarto nga ipapilit kini nga dili kinahanglan nga usbon ang z-index values sa tanan nga uban nga mga elemento. Pananglitan:
- 100 alang sa akong pinakadako nga elemento
- 0 alang sa akong tunga nga elemento
- -100 alang sa akong ubos nga elemento
Makahatag ka usab sa duha ka mga elemento sa sama nga z-index nga bili. Kon kini nga mga elemento gipundok, kini ipasundayag sa han-ay nga gisulat sa HTML, uban sa katapusan nga elemento sa ibabaw.
Usa ka mubo nga sulat, alang sa usa ka elemento aron epektibong mogamit sa z-index nga kabtangan, kini kinahanglan nga elemento sa block level o mogamit sa usa ka display sa "block" o "inline-block" sa imong CSS file.
Ang orihinal nga artikulo ni Jennifer Krynin. Gi-edit sa 12/09/16 ni Jeremy Girard.