Pożizzjonament ta 'elementi li jiżżerżqu b'folji ta' l-istil Cascading
Waħda mill-isfidi meta tuża l-pożizzjonament tas-CSS għat-tqassim tal-web page hija li xi wħud mill-elementi tiegħek jistgħu jikkoinċidu ma 'oħrajn. Dan jaħdem tajjeb jekk trid li l-aħħar element fl-HTML ikun fuq, iżda x'jiġri jekk ma tagħmilx jew x'jiġri jekk trid li jkollok elementi li attwalment ma jikkoinċidux oħrajn biex jagħmlu dan minħabba li d-disinn jitlob għal din il-ħarsa "b'saff" ? Sabiex tibdel il-mod kif l-elementi jirkbu fuq xulxin għandek bżonn tuża l-proprjetà tas-CSS.
Jekk użajt għodda ta 'grafika fil-Kelma u l-PowerPoint jew aktar editur tal-immaġni b'saħħtu bħall-Adobe Photoshop, allura ċ-ċansijiet li rajt xi ħaġa bħal z-index in action. F'dawn il-programmi, tista 'tenfasizza l-oġġett (i) li tkun ħadt, u agħżel l-għażla li "Ibgħat lura" jew "Wassal' il quddiem" ċerti elementi tad-dokument tiegħek. Fl-Photoshop, m'għandekx dawn il-funzjonijiet, imma għandek il-pannell "Saff" tal-programm u tista 'tirranġa fejn element jaqa' fil-kanvas billi titranġa dawn is-saffi. Fiż-żewġ eżempji ta 'dawn, essenzjalment inti qed tistabbilixxi l-indiċi z ta' dawk l-oġġetti.
X'inhu l-indiċi z?
Meta qed tuża l-pożizzjonament tas-CSS għall-elementi tal-pożizzjoni fuq il-paġna, għandek bżonn taħseb fi tliet dimensjonijiet. Hemm iż-żewġ dimensjonijiet standard: xellug / lemin u top / qiegħ. L-indiċi tax-xellug għal-lemin huwa magħruf bħala l-indiċi x, filwaqt li l-indiċi ta 'fuq għal isfel huwa l-indiċi y. Dan huwa kif tista 'tqiegħed l-elementi orizzontalment jew vertikalment, billi tuża dawn iż-żewġ indiċijiet.
Meta tidħol fid-disinn tal-web, hemm ukoll l-ordni ta 'stacking tal-paġna. Kull element fuq il-paġna jista 'jkun immejjel fuq jew taħt kwalunkwe element ieħor. Il-proprjetà ta 'indiċi z tiddetermina fejn fil-munzell hemm kull element. Jekk l-indiċi x u l-indiċi y huma l-linji orizzontali u vertikali, allura l-indiċi z huwa l-fond tal-paġna, essenzjalment it-tielet dimensjoni.
Jien inħobb naħseb dwar l-elementi fuq paġna web bħala biċċiet tal-karti, u l-paġni tal-web innifsu bħala collage. Fejn tpoġġi l-karta huwa ddeterminat mill-pożizzjonament, u kemm ta 'dan huwa kopert mill-elementi l-oħra huwa l-indiċi z.
L-indiċi z huwa numru, jew pożittiv (eż. 100) jew negattiv (eż. -100). L-indiċi z default huwa 0. L-element bl-ogħla indiċi z huwa fuq nett, segwit mill-ogħla li jmiss u hekk sal-indiċi z baxx. Jekk żewġ elementi għandhom l-istess valur ta 'l-indiċi z (jew mhuwiex definit, li jfisser l-użu tal-valur awtomatiku ta' 0) il-brawżer se jħejjihom fl-ordni li jidhru fl-HTML.
Kif għandek tuża l-indiċi z
Agħti kull element li trid fil-munzell tiegħek valur z index differenti. Per eżempju, jekk għandi ħames elementi differenti:
- element 1 - z-indiċi ta '-25
- element 2 - indiċi z ta '82
- element 3 - z-indiċi mhux stabbilit
- element 4 - z-indiċi ta '10
- element 5 - z-indiċi ta '-3
Huma se jimmaturaw fl-ordni li ġejja:
- element 2
- element 4
- element 3
- element 5
- element 1
Jiena nirrakkomanda li jintużaw valuri ta 'l-indiċi z differenti ferm biex jimmaturaw l-elementi tiegħek. B'dak il-mod, jekk żżid aktar elementi mal-paġna aktar tard, ikollok spazju biex issalvahom mingħajr ma jkollok taġġusta l-valuri indiċi z ta 'l-elementi l-oħra kollha. Pereżempju:
- 100 għall-element ewlieni tiegħi
- 0 għall-element tan-nofs tiegħi
- -100 għall-element tal-qiegħ tiegħi
Tista 'wkoll tagħti żewġ elementi l-istess indiċi z-valur. Jekk dawn l-elementi huma f'munzelli, huma juru fl-ordni li jinkitbu fl-HTML, bl-aħħar element fuq nett.
Nota waħda, għal element li tuża b'mod effettiv il-proprjetà ta 'l-indiċi z, għandha tkun element ta' livell ta 'blokka jew tuża wirja ta' "blokk" jew "inline-block" fil-fajl CSS tiegħek.
Artikolu oriġinali minn Jennifer Krynin. Editjat fid-12/09/16 minn Jeremy Girard.