O le tulaga o le CSS e sili atu nai lo le X, Y Coordinates
O le tulaga o le CSS ua leva ona avea o se vaega tāua o le fatufatuina o laupepa uepisaite. E oʻo lava i le faʻavaeina o auala fou o le Lisi o le CSS e pei o le Flexbox ma le CSS Grid, o loʻo i ai pea se nofoaga taua i soo se faʻataʻitaʻiga o faʻataʻitaʻiga a le fausiaina.
A o faʻaaogaina le CSS, o le mea muamua e te manaʻomia e fai o le faʻatuina lea o le meatotino a le CSS mo le tulaga e taʻu atu ai i le masini pe afai o le a faʻaaogaina le tulaga atoatoa poʻo le vaʻaiga mo se elemene ua tuʻuina atu. E tatau foi ona e malamalama lelei i le eseesega i le va o nei tulaga tofi e lua.
E ui lava o tagata tutoatasi ma aiga o tulaga ia e lua o le CSS o loʻo masani ona faʻaaogaina i le mamanu i luga o le initaneti, e fa faʻailoga i le tulaga tofi:
- fuainumera
- saʻo
- aiga
- mautu
Faʻaalia o le tulaga le lelei mo soʻo se elemene i luga ole itulau. Afai e te le faʻamalamalamaina le tulaga o se elemene, o le a faʻamalosi. O lona uiga o le a faʻaalia i luga o le matala e faʻalagolago i luga o le mea oi ai i le pepa HTML ma pe faʻapefea ona faʻaalia i totonu o le masani masani o lena pepa.
Afai e te faʻatulaga tulafono faʻatulagaina e pei o le pito i luga poʻo le agavale i se elemene o loʻo i ai se tulaga maualuga, o le a le amanaia na tulafono ma o le elemene o le a tumau i le mea e aliali ai i le faasologa masani o pepa. O le mea moni, e seasea lava, pe afai ei ai, manaʻomia ona seti se elemene i se tulaga tulaga ese i le CSS talu mai lena mea o le tau le aoga.
Tulaga maualuga CSS Positioning
O le tulaga maualuga lava atonu o le tulaga sili ona faigofie o le CSS ia malamalama. E amata i lenei meatotino o le CSS:
tulaga: faʻamaoni;O lenei tau aogā e taʻu atu ai i le masini o soʻo se mea o le a faʻatulagaina e tatau ona aveesea mai le masani masani o le pepa ma tuʻuina i se nofoaga tonu ile itulau. E fuafua lenei mea i luga o le elemene pito sili ona latalata ona le faʻatulagaina o tuaa.
Talu ai ona o se elemene e matua faʻatulagaina e maua mai i le masani masani o le pepa aloaia, o le a le afaina ai pe faʻafefea ona faʻapipiʻi elemene muamua pe mulimuli ane i totonu o le HTML ile itulau.
E fai ma faʻataʻitaʻiga - a faʻapea o oe o se vaeluaga na faʻatulagaina e faʻaaoga ai le taua o le tauaiga (o le a matou vaʻavaʻai i lenei aoga i se taimi lata mai), ma i totonu o lena vaevaega sa e maua se palakalafa e te manaʻo e faʻatulagaina le 50 pika mai luga o le vaevaega, oe o le a faaopoopo i ai se tulaga taua o le "atoatoa" i lena parakalafa faatasi ai ma se tau o le offset o le 50px i le "luga" meatotino, e pei o lenei.
tulaga: faʻamaoni; luga: 50px;O lenei elemene o le eletise o le a faʻaalia pea 50 pixeli mai le pito i luga o lena vaevaega tuʻufaʻatasia - e tusa lava pe o le a le mea o loʻo faʻaalia i totonu o le masani masani. O lau 'eleʻele' faʻatulagaina o loʻo faʻaaogaina le tulaga faʻatulagaina e pei o lona faʻaliliuga ma le taua o le aoga e te faʻaaogaina e fetaui ma lena mea.
O mea faʻatulagaina e fa o loʻo e maua e faʻaoga ai:
- luga
- tauagavale
- pito i lalo
- taumatau
E mafai ona e faʻaaogaina i luga poʻo le pito i lalo (talu ai e le mafai ona faʻatulaga se elemene e tusa ai ma nei tau faʻataʻitaʻi) ma i le itu taumatau poʻo le agavale.
Afai e setiina se elemene i se tulaga o le tutoatasi, ae o le mea lea e leai ni augatuaa e le taua, ona tuu lea e faatatau i le elemene o le tino, o le elemene maualuga lea o le itulau.
Tulaga Faʻapitoa
Ua maeʻa ona matou faʻaalia le tulaga tuʻufaʻatasia, seʻi o tatou tilotilo i lena meatotino i le taimi nei.
O le faʻatulagaga faʻaaoga e faʻaaogaina ia lava tulaga tofi e fa e avea o se tulaga mautu, ae nai lo le fausiaina o le tulaga o le elemene i luga o lona tuaa e le o vavalalata lona tuaa, e amata mai le mea o le ai ai le elemene pe afai e masani lava ona masani.
Mo se faʻataʻitaʻiga, afai e iai lau parakalafa e tolu i luga o lau 'upega tafaʻilagi, ma le lona tolu o loʻo i ai se "tulaga: aiga" e tuʻuina i luga, o le tulaga o le a faʻasalaina e faʻavae i luga o le nofoaga o iai nei.
Palakalafa 1.
Parakalafa 2.
Palakalafa 3.
I le faʻataʻitaʻiga o loʻo i luga, o le parakalafa lona tolu o le a faʻatulagaina le 2em mai le itu tauagavale o le eletise, ae o le a lalo ifo lava i parakalafa muamua e lua. O le a tumau pea i le faasologa masani o le pepa aloaia, ma na o le paʻu laitiiti lava. Afai na e suia i le tulaga: faʻamaoni; soo se mea lava e mulimuli mai ai o le a faʻaalia i le tumutumu, aua o le a le toe i ai i le faasologa masani o le pepa.
Elemene i luga o le upega tafaʻilagi e masani ona faʻaaogaina e seti ai se tulaga taua: e leai se tau o le tau na faʻatūina, o lona uiga o loʻo tumau pea le mea tonu i le mea e masani ai. E faia lenei mea naʻo le faʻamautuina o lena elemene e avea o se faʻamatalaga e faasaga i isi elemene e mafai ona faʻatulagaina atoatoa. Mo se faʻataʻitaʻiga, afai o loʻo e vaeluaina lau 'upega tafaʻilagi uma ma le aoga o le "pusa" (lea o se tulaga e masani ai i le web design), o lena vaevaega e mafai ona faʻatutu i se tulaga o le aiga ina ia mafai ai e se mea oi totonu ona faʻaaoga o se tulaga o loʻo faʻatulagaina.
O le a le mea e uiga i le faʻatulagaina o le tulaga?
O le faʻamautuina o le tulaga e pei lava o le faʻatulagaina atoatoa. O le tulaga o le elemene o loʻo faʻatulagaina i le auala lava lea e tasi e pei o le faʻataʻitaʻiga, ae o elemene tumau e faʻapipiʻi i lena nofoaga-e pei lava o se mea e sili ona manaia . O isi mea uma o loʻo i luga o le itulau o le a faasolo atu i tua lena elemene.
Mo le faʻaaogaina o lenei tau, o le ae setiina:
tulaga: faʻatulagaina;Ia manatua, a e faʻafaigofie se elemene i luga o lau 'upega tafaʻilagi, o le a lolomiina i lena nofoaga pe a lolomiina lau itulau Upega. Mo se faʻataʻitaʻiga, afai e faʻamautu lou eletise i le pito i luga o lau itulau, o le a aliali mai i le pito i luga o itulau uma ua lolomi - ona ua faʻamau i le pito i luga o le itulau. E mafai ona e faʻaogaina ituaiga o le aufaasālalau e suia pe faapefea ona faʻaalia ele itulau lolomi elemene tumau:
@media screen {h1 # muamua {tulaga: mautu; }} @media print {h1 # muamua {position: static; ►}Original tusiga na saunia e Jennifer Krynin. Edited by Jeremy Girard i le aso 1/7/16.