Il-Pożizzjonament CSS huwa aktar minn sempliċement X, Y Koordinati
Il-pożizzjonament tas-CSS ilu parti importanti mill-ħolqien ta 'taqsim ta' websajts. Anki biż-żieda ta 'tekniki ġodda ta' tqassim tas-CSS bħal Flexbox u CSS Grid, il-pożizzjonament għad għandu post importanti fil-borża ta 'tricks tal-web designer.
Meta tuża l-pożizzjonament tas-CSS, l-ewwel ħaġa li għandek bżonn tagħmel hu li tistabbilixxi l-proprjetà CSS għal pożizzjoni li tgħid lill-browser jekk int ser tuża pożizzjoni assoluta jew relattiva għal element partikolari. Trid ukoll tifhem b'mod ċar id-differenza bejn dawn iż-żewġ proprjetajiet ta 'pożizzjonament.
Filwaqt li huma assoluti u relattivi ż-żewġ proprjetajiet ta 'pożizzjoni CSS l-aktar użati fid-disinn tal-web, fil-fatt hemm erba' stati għall-pożizzjoni tal-proprjetà:
- statiku
- assoluta
- qarib
- fissi
Static hija l-pożizzjoni awtomatika għal kwalunkwe element fuq paġna web. Jekk ma tiddefinix il-pożizzjoni ta 'element, tkun statika. Dan ifisser li se juri fuq l-iskrin ibbażat fuq fejn huwa fid- dokument HTML u kif juri ġewwa l -fluss normali ta 'dak id-dokument.
Jekk tapplika regoli ta 'pożizzjonar bħal fuq jew fuq ix-xellug għal element li għandu pożizzjoni statika, dawk ir-regoli se jiġu injorati u l-element jibqa' fejn jidher fil-fluss normali tad-dokument. Fil-fatt, rarament, jekk qatt, ikollok bżonn issettja element għal pożizzjoni statika fis-CSS peress li dak huwa l-valur awtomatiku.
Posizzjonament CSS Assolut
Pożizzjonament assoluta huwa probabbilment l-aktar faċilità ta 'CSS li tinftiehem. Tibda b'din il-proprjetà ta 'pożizzjoni CSS:
pożizzjoni: assoluta;Dan il-valur jgħidlek lill-brawżer li dak kollu li se jiġi mqiegħed għandu jitneħħa mill-fluss normali tad-dokument u minflok jitqiegħed f'post eżatt fuq il-paġna. Dan huwa kkalkulat fuq il-bażi tal-antenat l-iktar viċin ta 'dak l-element immontat mhux statikament.
Minħabba li element assolutament pożizzjonat huwa meħud mill-fluss normali tad-dokument, ma jaffettwax kif l-elementi qabel jew wara fih fl-HTML huma mqiegħda fuq il-paġna web.
Bħala eżempju - jekk kellek diviżjoni li kienet pożizzjonata bl-użu ta 'valur ta' qarib (aħna se nħarsu lejn dan il-valur dalwaqt), u ġewwa dik id-diviżjoni kellek paragrafu li ridt li tikkuntattja 50 pixel mill-quċċata tad-diviżjoni, inti iżid valur tal-pożizzjoni ta '"assoluta" għal dak il-paragrafu flimkien ma' valur ta 'kumpens ta' 50px fuq il-proprjetà "top", bħal dan.
pożizzjoni: assoluta; top: 50px;Dan l-element imqiegħed assolutament imbagħad dejjem juri 50 pixel mill-parti ta 'fuq ta' dik id-diviżjoni relattivament pożizzjonata - ma jimpurtax x'iktar turi hemm fil-fluss normali. L-element imqiegħed "assolutament" tiegħek uża l-pożizzjoni relattivament pożizzjonata bħala l-kuntest tiegħu u l-valur ta 'preżentazzjoni li tuża huwa relattiv għal dak.
L-erba 'proprjetajiet ta' pożizzjonament li għandek disponibbli għall-użu huma:
- top
- dritt
- qiegħ
- xellug
Tista 'tuża' l fuq jew il-qiegħ (peress li element ma jistax jiġi mqiegħed skond dawn iż-żewġ valuri) u jew fuq il-lemin jew fuq ix-xellug.
Jekk element ikun imqiegħed f'pożizzjoni ta 'assoluta, iżda hemm ma jkollu l-ebda antenat li ma jkunx imqiegħed b'mod statiku, imbagħad ikun imqiegħed relattiv għall-element tal-ġisem, li huwa l-element ta' l-ogħla livell tal-paġna.
Pożizzjonament Relattiv
Aħna diġà semmejt pożizzjonar relattiv, għalhekk ejja nħarsu lejn dik il-proprjetà issa.
L-ippożizzjonar relattiv juża l-istess erba 'proprjetajiet ta' pożizzjonament bħala pożizzjonament assolut, iżda minflok ma jibbaża l-pożizzjoni tal-element fuq l-aktar antenat tiegħu mhux pożizzjonat b'mod statiku, jibda minn fejn l-element ikun jekk ikun għadu fil-fluss normali.
Per eżempju, jekk għandek tliet paragrafi fuq il-paġna web tiegħek, u t-tielet għandu stil ta '"pożizzjoni: relattiva" imqiegħed fuqha, il-pożizzjoni tagħha se tiġi kkumpensata fuq il-post attwali tagħha.
Paragrafu 1.
Paragrafu 2.
Paragrafu 3.
Fl-eżempju ta 'hawn fuq, it-tielet paragrafu ser jiġi pożizzjonat 2em min-naħa tax-xellug tal-element tal-kontenitur, iżda xorta jkun taħt l-ewwel żewġ paragrafi. Ikun jibqa 'fid-direzzjoni normali tad-dokument, u għandu biss jiġi kkumpensat bi ftit. Jekk biddiltilha għall-pożizzjoni: assoluta; kull ħaġa li ssegwi tkun tidher fuqha, minħabba li ma tibqax fl-andament normali tad-dokument.
L-elementi fuq paġna tal-web spiss jintużaw biex jistabbilixxu valur tal-pożizzjoni: relattiva mingħajr l-ebda valur ta 'kumpens stabbilit, li jfisser li dak l-element jibqa' eżattament fejn jidher fil-fluss normali. Dan isir biss biex jiġi stabbilit dak l-element bħala kuntest li miegħu elementi oħra jistgħu jitqiegħdu assolutament. Per eżempju, jekk għandek diviżjoni madwar il-websajt kollha tiegħek b'valur ta 'klassi ta' "kontejner" (li huwa xenarju komuni ħafna fid-disinn tal-web), dik id-diviżjoni tista 'titqiegħed f'pożizzjoni ta' qarib sabiex kull ħaġa li fiha tista 'tuża dan bħala kuntest ta 'pożizzjonament.
Xi Dwar Pożizzjonament Fiss?
Il-pożizzjonar fiss huwa simili ħafna għall-pożizzjonar assolut. Il-pożizzjoni tal-element hija kkalkulata bl-istess mod bħall-mudell assolut, iżda l-elementi fissi mbagħad jiġu ffissati f'dak il-post - kważi bħal watermark . Kollox fuq il-paġna imbagħad ikejjel dak l-element.
Biex tuża dan il-valur tal-proprjetà, għandek tiffissa:
pożizzjoni: fissa;Żomm f'moħħok, meta tiffissa element f'postha fuq is-sit tiegħek, hija tipprintja f'dak il-post meta l-paġna tal-Web tiegħek tkun stampata. Per eżempju, jekk l-element tiegħek hu ffissat fil-parti ta 'fuq tal-paġna tiegħek, jidher fuq in-naħa ta' fuq ta 'kull paġna stampata - għaliex huwa ffissat fuq il-quċċata tal-paġna. Tista 'tuża tipi ta' midja biex tibdel kif il- paġni stampati juru elementi fissi:
@media screen {h1 # first {pożizzjoni: fissa; }} @media print {h1 # first {pożizzjoni: statika; }}Artikolu oriġinali minn Jennifer Krynin. Editjat minn Jeremy Girard fl-1/7/16.