Vipengele vilivyounganishwa na Nyaraka za Sinema za Nyaraka
Mojawapo ya changamoto wakati wa kutumia nafasi ya CSS kwa mpangilio wa ukurasa wa wavuti ni kwamba baadhi ya mambo yako yanaweza kuingilia wengine. Hii inafanya kazi nzuri ikiwa unataka kipengele cha mwisho katika HTML kuwa juu, lakini ni nini ikiwa huna au nini ikiwa unataka kuwa na vipengele ambavyo haviingizii wengine kufanya hivyo kwa sababu kubuni inaita kwa hii "taa" ya kuangalia ? Ili kubadilisha njia ambazo vipengele vinaingiliana unahitaji kutumia mali ya CSS.
Ikiwa umetumia zana za picha katika Neno na PowerPoint au mhariri wa picha zaidi imara kama Adobe Photoshop, basi uwezekano umeona kitu kama z-index katika hatua. Katika programu hizi, unaweza kuonyesha kitu ambacho umechukua, na chagua chaguo la "Tuma nyuma" au "Ita mbele" vipengele fulani vya waraka wako. Katika Pichahop, huna kazi hizi, lakini una kipengee cha "Layer" cha programu na unaweza kupanga ambapo kipengele kinaanguka kwenye turuba kwa kurekebisha tena tabaka hizi. Katika mifano hizi mbili, wewe ni muhimu kuweka z-index ya vitu hivi.
Ni nini z-index?
Unapotumia nafasi ya CSS ili kuweka vipengele kwenye ukurasa, unahitaji kufikiria kwa vipimo vitatu. Kuna vipimo viwili vya kiwango: kushoto / kulia na juu / chini. Nambari ya kushoto kwenda kulia inajulikana kama index-x, wakati juu hadi chini ni y-index. Hii ndio jinsi unavyosimamia vipengele kwa usawa au kwa wima, kwa kutumia indexes hizi mbili.
Wakati inakuja kwenye kubuni wavuti, pia kuna utaratibu wa kupakia wa ukurasa. Kila kipengele kwenye ukurasa kinaweza kuchapwa juu au chini ya kipengele kingine chochote. Mali ya z-index huamua ambapo katika stack kila kipengele ni. Ikiwa x-index na y-index ni mistari ya usawa na wima, basi z-index ni kina cha ukurasa, kimsingi ni mwelekeo wa 3.
Napenda kufikiria mambo kwenye ukurasa wa wavuti kama vipande vya karatasi, na ukurasa wa wavuti yenyewe kama collage. Ambapo ninaweka karatasi imedhamiriwa na nafasi, na ni kiasi gani kinachofunikwa na mambo mengine ni z-index.
Z-index ni nambari, ama chanya (kwa mfano 100) au hasi (kwa mfano -100). Nambari ya z-default ni 0. Kipengele na index ya juu zaidi ni juu, ikifuatiwa na ya juu zaidi na kuendelea chini ya z-index ya chini. Ikiwa vipengele viwili vina thamani sawa ya z-index (au haijafafanuliwa, inamaanisha matumizi ya thamani ya default ya 0) kivinjari kitawaweka safu ili waweze kuonekana kwenye HTML.
Jinsi ya kutumia z-index
Kutoa kipengele kila unachotaka katika stack yako tofauti ya thamani ya z. Kwa mfano, ikiwa nina mambo tano tofauti:
- kipengele 1 - z-index ya -25
- kipengele cha 2-z-index ya 82
- kipengele cha 3-z-index haziwekwa
- kipengele 4-z-index ya 10
- kipengele cha 5-z-index ya -3
Wao wataweka kwa amri ifuatayo:
- kipengele 2
- kipengele 4
- kipengele cha 3
- kipengele cha 5
- kipengele 1
Ninapendekeza kutumia viwango vya tofauti vya z-index kwa kuweka mambo yako. Kwa njia hiyo, ikiwa unaongeza vipengee zaidi kwenye ukurasa baadaye, una nafasi ya kuwaweka ndani bila kuzingatia maadili ya z-index ya mambo mengine yote. Kwa mfano:
- 100 kwa kipengele changu cha juu zaidi
- 0 kwa kipengele changu cha kati
- -100 kwa kipengele changu cha chini
Unaweza pia kutoa vipengele viwili thamani sawa ya z-index. Ikiwa vipengele hivi vimewekwa, wataonyeshwa kwa amri ambavyo vimeandikwa katika HTML, na kipengele cha mwisho juu.
Kumbuka moja, kwa kipengele cha kutumia mali ya z-index kwa ufanisi, ni lazima kuwa kipengele cha kiwango cha kuzuia au kutumia maonyesho ya "block" au "block-inline" katika faili yako ya CSS.
Makala ya awali na Jennifer Krynin. Ilibadilishwa tarehe 12/09/16 na Jeremy Girard.