Ang isa sa mga hamon kapag gumagamit ng pagpoposisyon ng CSS para sa layout ng web page ay ang ilan sa iyong mga elemento ay maaaring magsanib ng iba. Ito ay gumagana pagmultahin kung nais mo ang huling sangkap sa HTML upang maging sa tuktok, ngunit kung ano kung hindi mo o kung ano kung nais mong magkaroon ng mga elemento na kasalukuyang hindi magkakapatong sa iba na gawin ito dahil ang disenyo ng mga tawag para sa "layered" hitsura ? Upang baguhin ang paraan ng mga sangkap na nagsasapawan kailangan mong gamitin ang ari-arian ng CSS.
Kung gumamit ka ng mga tool sa graphics sa Word at PowerPoint o isang mas mahusay na editor ng imahe tulad ng Adobe Photoshop, pagkatapos ay may mga pagkakataon na nakita mo ang isang bagay tulad ng z-index sa aksyon. Sa mga programang ito, maaari mong i-highlight ang (mga) bagay na iyong iguguhit, at pumili ng opsyon na "Ipadala sa likod" o "Dalhin sa harap" ang ilang mga elemento ng iyong dokumento. Sa Photoshop, wala kang mga function na ito, ngunit mayroon kang "Layer" na pane ng programa at maaari mong ayusin kung saan nahuhulog ang isang elemento sa canvas sa pamamagitan ng pag-aayos ng mga layer na ito. Sa pareho ng mga halimbawang ito, mahalagang isinaayos mo ang z-index ng mga bagay na iyon.
Ano ang Z-Index?
Kapag gumagamit ka ng CSS positioning upang ilagay ang mga elemento sa pahina, kailangan mong mag-isip sa tatlong dimensyon. Mayroong dalawang karaniwang sukat: kaliwa / kanan at itaas / ibaba. Ang kaliwa sa kanan index ay kilala bilang ang x-index, habang ang itaas hanggang sa ibaba ay ang y-index. Ito ay kung paano mo iposisyon ang mga elemento nang pahalang o patayo, gamit ang dalawang index na ito.
Pagdating sa disenyo ng web, mayroon din ang pagkakasunud-sunod ng pagkakasunod-sunod ng pahina. Ang bawat elemento sa pahina ay maaaring layered sa itaas o mas mababa sa anumang iba pang elemento. Tinutukoy ng z-index property kung saan nasa stack ang bawat elemento. Kung ang x-index at y-index ay ang pahalang at vertical na mga linya, pagkatapos ay ang z-index ay ang lalim ng pahina, mahalagang ang ika-3 dimensyon.
Isipin ang mga elemento sa isang web page bilang mga piraso ng papel at ang web page mismo bilang isang collage. Kung saan ilalagay mo ang papel ay natutukoy sa pamamagitan ng pagpoposisyon, at kung gaano ang sakop nito sa iba pang mga sangkap ay ang z-index.
- Ang z-index ay isang numero, positibo (hal. 100) o negatibo (hal. -100).
- Ang default na z-index ay 0.
Ang elemento na may pinakamataas na z-index ay nasa itaas, na sinusundan ng susunod na pinakamataas at kaya pababa sa pinakamababang z-index. Kung ang dalawang elemento ay may parehong z-index na halaga (o hindi ito tinukoy, ibig sabihin, gamitin ang default na halaga ng 0) ay bubuuin ng browser ang mga ito sa pagkakasunud-sunod na lumilitaw sa HTML.
Paano Gamitin ang Z-Index
Bigyan ang bawat elemento na gusto mo sa iyong stack ng ibang z-index na halaga. Halimbawa, kung mayroon kang limang magkakaibang elemento:
- elemento A - z-index ng -25
- elemento B - z-index ng 82
- Hindi nakatakda ang elemento ng C-z-index
- elemento D - z-index ng 10
- elemento E-z-index ng -3
Sila ay magtatakda sa sumusunod na order:
- elemento B
- elemento D
- elemento C
- elemento E
- elemento A
Inirerekumenda na gumamit ng napakalawak na iba't ibang mga halaga ng z-index upang i-stack ang iyong mga elemento. Sa ganoong paraan, kung magdagdag ka ng higit pang mga elemento sa pahina sa ibang pagkakataon, mayroon kang silid upang i-layer ang mga ito nang hindi kinakailangang ayusin ang mga halaga ng z-index ng lahat ng iba pang mga elemento. Halimbawa:
- 100 para sa iyong pinakamataas na elemento
- 0 para sa iyong gitnang elemento
- -100 para sa iyong elemento sa ilalim
Maaari ka ring magbigay ng dalawang elemento ng parehong halaga ng z-index. Kung ang mga sangkap na ito ay nakasalansan, ipapakita ito sa pagkakasunud-sunod na nakasulat sa HTML, na may huling elemento sa itaas.
Isang tala: para sa isang elemento upang epektibong gamitin ang z-index na ari-arian, dapat itong maging elemento ng antas ng block o gumamit ng pagpapakita ng "block" o "inline-block" sa iyong CSS file.
