Positioning Overlapping Element with Cascading Style Sheets
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 higit pang mahusay na editor ng imahe tulad ng Adobe Photoshop, malamang 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 pag-andar na ito, ngunit mayroon kang pane ng "Layer" ng programa at maaari mong isaayos kung saan bumaba ang 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.
Kapag sa 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.
Gusto kong isipin ang mga elemento sa isang webpage bilang mga piraso ng papel, at ang web page mismo bilang isang collage. Kung saan inilalagay ko ang papel ay natutukoy sa pamamagitan ng pagpoposisyon, at kung gaano ang nasasakupan ng iba pang mga sangkap ay ang z-index.
Ang z-index ay isang numero, alinman sa positibo (hal. 100) o negatibong (eg -100). Ang default na z-index ay 0. Ang elemento na may pinakamataas na z-index ay nasa tuktok, 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 akong limang magkakaibang elemento:
- elemento 1 - z-index ng -25
- elemento 2 - z-index ng 82
- Ang elemento 3 - z-index ay hindi nakatakda
- elemento 4 - z-index ng 10
- elemento 5 - z-index ng -3
Sila ay magtatakda sa sumusunod na order:
- elemento 2
- elemento 4
- elemento 3
- elemento 5
- elemento 1
Inirerekumenda ko ang paggamit ng napakalawak na iba't ibang mga halaga ng z-index upang maitago 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 aking pinakamataas na elemento
- 0 para sa aking gitnang elemento
- -100 para sa aking ilalim na elemento
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.
Orihinal na artikulo ni Jennifer Krynin. Na-edit noong 12/09/16 ni Jeremy Girard.