CSS kokatzea X baino txikiagoa da, Y Koordenatuak
CSS kokatzea web diseinuak sortzeko zati garrantzitsua izan da aspalditik. Nahiz eta Flexbox eta CSS Grid bezalako CSS formatu berriagoak gehitzen diren, kokatzea oraindik ere leku garrantzitsua da edozein diseinatzaileen trikimailu poltsikoan.
CSS kokatzea erabiltzean, lehenik eta behin egin behar duzun CSS propietatea ezarriko da posizioan arakatzailera esateko, elementu jakin bat edo erlatiboa kokapen jakin bat erabiltzen ari bazara. Gainera, bi posizionamendu propietate horien arteko aldea argi eta garbi ulertu behar duzu.
Absolutu eta erlatiboak web diseinuko gehien erabiltzen diren bi CSS posizioak izateaz gain, posizioaren lau posizio daude:
- estatikoan
- absolutua
- erlatiboa
- finkoa
Estatikoa web orrialde baten edozein elementuren kokapen lehenetsia da. Elementu baten posizioa definitzen ez baduzu, estatikoa izango da. Horrek esan nahi du pantailan erakutsiko dela HTML dokumentuan dagoen lekuan eta dokumentu horren fluxu normalaren barruan nola bistaratuko den.
Posizionamendu arauak aplikatzen badituzu, posizio estatikoa duen elementu bateko goialdean edo ezkerrean, arau hauek ez dira kontuan hartuko eta elementua dokumentu-fluxu normal batean agertuko da. Egia esan, oso gutxitan izan beharko zenuke inoiz, CSS-en kokapen estatiko batera elementu bat ezartzea, balio lehenetsia baita.
Absolutu CSS kokatzea
Posizionamendu absolutua, seguru asko, ulertzeko errazena den CSS posizioa da. CSS posizioaren propietate honekin hasten zara:
posizioa: absolutua;Balio hauek kokatzen den edozein arakatzaileari dokumentuaren fluxu normaletik kendu eta kokapen zehatz batean kokatu beharko lukete. Elementu horri dagokion kokapen ez-estatikoki hurbilenean oinarrituta kalkulatzen da.
Elementu erabat posizionatua dokumentuaren fluxu normaletik ateratzen ez denean, ez du eraginik izango webaren aurreko edo ondorengo elementuetan nola kokatzen diren.
Adibide gisa: zatiketa bat izan bazenuen erlatiboa balioa erabiliz (balore hau gutxitan ikusiko dugu), eta zatiketa horren barnean zatiketa goialdean 50 pixel kokatu nahi dituzun paragrafo bat izan duzu. paragrafo horretan "absolutua" posizio-balioa gehituko lioke "top" propietatearen 50px-ko desplazamendu-balioarekin, horrela.
posizioa: absolutua; top: 50px;Elementu guztiz kokatu ondoren, beti 50 zatitan banatutako posizioaren goialdean bistaratuko dira pixkanaka, eta horrek ez du beste inolako fluxu normaletan bistaratuko. Zure "erabat" kokatutako elementuei nahiko kokatuta dago, bere testuinguru gisa eta erabilitako balioen balioa erlatiboa dela.
Erabili beharreko lau posizionatzeko propietateak hauek dira:
- goiko
- eskuineko
- behean
- ezker
Goiko edo behealdeak erabil ditzakezu (elementu bat ezin baita kokatu bi balio horien arabera) eta eskuinera edo ezkerrera.
Elementu bat absolutua den posizio batera ezarrita badago, baina ez dago kokapen estaturorik gabeko arbasoarik, orduan kokatuko da gorputzaren elementuari dagokionez, hau da, orrialdearen maila altuena.
Posizionamendu erlatiboa
Dagoeneko aipatu posizionamendu erlatiboa, beraz, begiratu orain jabetza hori.
Posizionamendu erlatiboa posizionamendu absolutuaren lau posizionamendu propietate gisa erabiltzen da, baina elementu horren posizioa kokapen ez-estatikoki hurbilenean oinarritzen den tokian oinarrituta, elementua korronte normaletan egon litekeenetik hasten da.
Adibidez, zure web orrian hiru paragrafo dituzu eta hirugarrenek "posizioa: erlatiboa" estiloa dute jartzen, posizioa desplazamendua izango da kokapenean oinarrituta.
1. paragrafoa.
2. puntua.
3. paragrafoa.
Aurreko adibidean, hirugarren paragrafoa kokapenean kokatuko da edukiontziaren ezkerreko aldean dagoen 2em, baina lehen bi paragrafoen azpian geratuko da. Dokumentuaren fluxu normalean jarraituko luke, eta apur bat konpentsatu behar da. Posizioan aldatu baduzu: absolutua; Jarraian azaldutako zerbait izango litzateke haren gainean, dokumentuaren fluxu normaletan ez baitzen.
Web orrialdeetako elementuak maiz erabiltzen dira posizioaren balioa ezartzeko: ezarritako konpentsazio-balio erlatiboa, eta horrek esan nahi du fluxu normalean agertzen dela zehazki. Elementu hori testuinguru gisa ezartzen da soilik, beste elementu batzuek erabat kokatu ahal izateko. Esate baterako, zure webgunearen inguruko zatiketa bat baduzu "edukiontzi" klasearen balioarekin (hau da, web diseinua oso ohikoa den kasuetan), zatiketa erlatiboki kokatuta egon daiteke, horren barruan dagoen guztia erabil daiteke kokapen testuinguru gisa.
Posizio finkoari buruz zer?
Kokapen finkoa kokapen absolutua bezalakoa da. Elementuaren posizioa eredu absolutua bezala kalkulatzen da, baina elementu finkoak kokapen horretan konponduko dira. Beste orrialde horretan elementu hori gainditu egingo da.
Balioaren balio hau erabiltzeko, ezarri beharko zenuke:
posizioa: finkoa;Gogoan izan, zure webguneko elementu bat konpontzen duzunean, kokaleku horretan inprimatuko du Web orria inprimatuta dagoenean. Esate baterako, zure elementua zure orriaren goialdean finkoa bada, inprimatutako orrialde bakoitzaren goialdean agertuko da - orrialdearen goiko aldean dago. Multimedia motak erabil ditzakezu inprimatutako orriek elementu finko gisa nola aldatzen diren aldatzeko:
@media pantaila {h1 # first {position: fixed; }} @media print {h1 # first {position: statatic; }}Jennifer Krynin-en jatorrizko artikulua. Jeremy Girard-ek argitaratua, 2007/07/16.