Mametraka singa mifampitohitohy miaraka amin'ny takelaka kasikety
Ny iray amin'ireo fanamby amin'ny fampiasana ny fametrahana CSS ho an'ny tranonkala pejy dia ny sasany amin'ireo singa misy anao mety handratra ny hafa. Izany dia tsara raha toa ka tadiavinao ny singa farany ao amin'ny HTML ho ambony, fa ahoana raha tsy manao na inona ianao raha te hanana singa izay tsy maharesy lahatra ny hafa hanao izany satria ny design dia miantso ity "soritra" ? Mba hahafahana manova ny fomba fiheveran'ny vondrona dia mila mampiasa ny fananana CSS ianao.
Raha nampiasa fitaovana grafika ianao ao amin'ny Word sy PowerPoint na maimaimpoana maoderina tahaka ny Adobe Photoshop, dia azonao atao ny mahita zavatra tahaka ny z-index amin'ny asa. Ao anatin'ireo fandaharana ireo dia azonao atao ny manasongadina ireo zavatra nomaninao, ary misafidiana safidy "Send to back" na "Mitondrà aloha" singa sasantsasany amin'ny rakitrao. Ao amin'ny Photoshop, tsy manana ireo asa ireo ianao, fa manana ny faritry ny "Layer" ao amin'ny programa ary azonao atao ny mametraka ny singa iray miditra ao anaty boaty kely amin'ny alàlan'ny fanavaozana ireo sora-baventy ireo. Amin'ireto ohatra roa ireto, dia mametraka ny z-indetezin'ireo zavatra ireo ianao.
Inona ny z-index?
Rehefa mampiasa ny toerana misy ny CSS ianao mba hametrahana singa ao amin'ny pejy, dia mila mieritreritra amin'ny fomba telo ianao. Misy ny roa teboka miavaka: ankavia / ankavanana ary ambony / ambany. Ny bokotra ankavia miankavanana dia fantatra amin'ny hoe x-index, raha ny top-ny voalohany dia ny y-index. Izany no fomba hametrahanao ireo singa miavaka amin'ny horita na ny dikany, amin'ny fampiasana ireo singa roa ireo.
Rehefa tonga eo amin'ny famoronana tranonkala, dia misy ihany koa ny baikon'ny fametrahana ny pejy. Ny singa tsirairay ao amin'ny pejy dia azo faritana etsy ambany na eo ambanin'ny elany hafa. Ny endriky ny z-index dia mamaritra ny toerana misy ny singa tsirairay. Raha ny x-index sy ny y-index dia ny tsipika mahitsy sy avoaka, ny z-index dia ny halalin'ny pejy, indrindra ny fizarana fahatelo.
Tiako ny mieritreritra ireo singa ao amin'ny tranonkala ho toy ny taratasy kely, ary ny pejin-tranonkala ho toy ny saribao. Ny toerana hametrahako ny taratasy dia miorina amin'ny alàlan'ny fametrahana, ary ny halehiben'izany dia rakotra ireo singa hafa ny z-index.
Ny z-index dia isa, na positive (ohatra 100) na ratsy (ohatra -100). Ny z-index zanga dia 0. Ny elanelana misy ny z-index avo indrindra dia ambony, ary manaraka ny ambaratonga manaraka, ary toy izany hatrany hatrany amin'ny z-ambany. Raha misy singa roa mitovy amin'ny z-index (na tsy voafaritra izany, midika hoe ny fampiasana ny sanda maimaim-poana amin'ny 0) dia hametraka azy ireo ao amin'ny baiko hita ao amin'ny HTML izy ireo.
Ahoana ny fampiasana z-index
Omeo singa iray amin'ny z-index ny singa tsirairay tianao ao amin'ny paozinao. Ohatra, raha manana singa dimy aho:
- element 1 - z-index of -25
- element 2 - z-index of 82
- element 3 - z-index tsy napetraka
- element 4 - z-index of 10
- element 5 - z-index of -3
Izy ireo dia haka ity didy manaraka ity:
- element 2
- element 4
- element 3
- element 5
- element 1
Manoro hevitra aho amin'ny fampiasana ny soatoavina z-indetezina be dia be mba hampiato ny singao. Amin'izany fomba izany, raha ampidirinao ao amin'ny pejy manaraka ny singa maromaro, dia manana efi-postso ianao raha tsy manitsy ny soatoavin'ny z-endritsin'ny singa hafa. Ohatra:
- 100 ho an'ny singa lehibe indrindra amiko
- 0 ho an'ny singa afovoany
- -100 ho an'ny singa fototra
Azonao atao koa ny manome singa roa mitovy ny z-index value. Raha ampidirina ireo singa ireo, dia hampiseho amin'ny baiko nosoratany tao amin'ny HTML izy ireo, ary ny singa farany ambony.
Ny fanamarihana iray, ho an'ny singa iray hampiasana tsara ny fananana z-index, dia tsy maintsy ho singa miiba na ampiasaina ny "block" na "inline block" ao amin'ny rakitra CSS.
Lahatsoratra niavian'i Jennifer Krynin. Edited on 12/09/16 by Jeremy Girard.