Tá níos mó ná Position X, Comhordanáidí Y suiteáil CSS
Is cuid thábhachtach de shuiteáil láithreán gréasáin a chruthaigh suíomh CSS i gcónaí. Fiú amháin le méadú ar theicnící leagan amach nua CSS mar Ghreille Flexbox agus CSS, tá áit thábhachtach fós ag suíomh in aon mhála cleasanna gréasáin de dhearthóir gréasáin.
Nuair atá suíomh CSS á úsáid agat, is é an chéad rud a theastaíonn uait a dhéanamh ná maoin CSS a bhunú chun seasamh a insint don bhrabhsálaí má úsáideann tú suíomh iomlán nó coibhneasta le haghaidh eilimint áirithe. Ní mór duit freisin an difríocht idir na dá airíonna poist seo a thuiscint go soiléir.
Cé go bhfuil an dá sheasamh poist CSS is mó a úsáidtear go minic i ndearadh gréasáin agus is coibhneasta, tá ceithre stáit i ndáiríre i seilbh na maoine:
- statach
- iomlán
- coibhneasta
- socraithe
Is é Static an seasamh réamhshocraithe le haghaidh aon eilimint ar leathanach gréasáin. Mura sainmhíníonn tú seasamh eilimint, beidh sé statach. Ciallaíonn sé seo go ndéanfar é a thaispeáint ar an scáileán bunaithe ar an áit a bhfuil sé sa doiciméad HTML agus conas a thaispeánfadh sé taobh istigh de ghnáth-shreabhadh an doiciméid sin.
Má chuireann tú rialacha suímh i bhfeidhm ar nós an chuid is mó nó ar chlé le gné a bhfuil seasamh statach acu, déanfar neamhaird ar na rialacha sin agus fanfaidh an eilimint nuair a fheictear é i sreabhadh gnáthcháipéise. Go fírinne, is annamh a theastaíonn uait, más rud é riamh, gné a leagan síos i seasamh statach i CSS ós rud é go bhfuil an luach réamhshocraithe ann.
Seasamh Absalóideach CSS
Is dócha gurb é an seasamh Absolute an seasamh CSS is éasca le tuiscint. Tosaíonn tú leis an maoin seasamh seo CSS:
seasamh: iomlán;Insíonn an luach seo leis an bhrabhsálaí gur chóir go mbainfí an t-ábhar ar bith a bheadh le suí ar shreabhadh an cháipéis agus ina ionad sin cuirfear suíomh cruinn ar an leathanach. Déantar é seo a ríomh bunaithe ar sinsear is gaire neamh-statach an eilimint sin.
Ós rud é go nglactar gné atá suite go hiomlán as gnáthshreabhadh an doiciméid, ní dhéanfaidh sé difear do conas atá na heilimintí roimh nó ina dhiaidh sin sa HTML suite ar an leathanach gréasáin.
Mar shampla - má bhí roinn agat a bhí suite ag baint úsáide as luach coibhneasta (féachfaimid ar an luach seo go gairid), agus taobh istigh den roinn sin, bhí mír agat a raibh tú ag iarraidh 50 picteilín a bheith agat ó bharr na roinne, go gcuirfí luach poist "iomlán" leis an mír sin chomh maith le luach fritháirithe 50px ar an maoin "barr", mar seo.
seasamh: iomlán; barr: 50px;Ansin, taispeánfadh an eilimint seo go hiomlán 50 picteilín ó bharr an rannáin réasúnta sin - is cuma cén taispeántas eile atá ann sa ghnáthshreabhadh. Úsáideadh do ghné "hiomlán" suite an t-áit réasúnta mar chomhthéacs agus is é an luach atá ag baint úsáide as coibhneas leis sin.
Is iad na ceithre airíonna suímh a bhfuil tú ar fáil le húsáid ná:
- barr
- ceart
- bun
- ar chlé
Is féidir leat barr nó bun a úsáid (ós rud é nach féidir eilimint a shuiteáil de réir an dá luachanna sin) agus ceart nó clé.
Más rud é go bhfuil eilimint leagtha síos i seasamh iomlán, ach níl aon sinsear neamh-statach ann, ansin beidh sé suite i gcoibhneas leis an eilimint chomhlachta, arb é an eilimint leibhéal is airde den leathanach é.
Seasamh Coibhneasta
Luaitear suíomh coibhneasta cheana féin, mar sin déanfaimid breathnú ar an maoin sin anois.
Úsáideann suíomh coibhneasta na ceithre airíonna suímh céanna mar shuíomhanna iomlána, ach in áit seasamh an eilimint a bhunú ar a sinsear is gaire neamh-statach, tosaíonn sé ón áit a mbeadh an eilimint más rud é go raibh sé fós sa ghnáthshreabhadh.
Mar shampla, má tá trí mhír agat ar do leathanach gréasáin, agus tá stíl "seasamh: coibhneasta" curtha ar an tríú, cuirfear an t-ionad sin ar fhritháireamh bunaithe ar an suíomh atá ann faoi láthair.
Mír 1.
Mír 2.
Alt 3.
Sa sampla thuas, beidh an tríú mír suite 2em ón taobh clé den eilimint coimeádán, ach beidh sé fós faoi bhun na chéad dhá mhír. D'fhanfadh sé i ngnáthshreabhadh an doiciméid, agus níorbh fhéidir é a fhritháireamh beagán. Má d'athraigh tú é chun seasamh: iomlán; rud ar bith a leanfadh sé a thaispeánfadh sé ar a bharr, toisc nach mbeadh sé níos faide ná gnáthshreabhadh an doiciméid.
Is minic a úsáidtear eilimintí ar leathanach gréasáin chun luach seasamh a leagan síos: i gcoibhneas gan aon luach fritháireamh a bunaíodh, rud a chiallaíonn go bhfuil an eilimint sin fós go díreach i gcás ina bhfeicfeadh sé i ngnáthshreabhadh. Déantar é seo amháin chun an eilimint sin a bhunú mar chomhthéacs ina bhféadfaí eilimintí eile a shuí go hiomlán. Mar shampla, má tá roinn agat timpeall ar do láithreán gréasáin ar fad le luach aicme "coimeádán" (a bhfuil cás an-choitianta i ndearadh gréasáin), is féidir an rannán sin a shocrú i riocht coibhneasta ionas gur féidir le haon taobh istigh de sé mar chomhthéacs suímh.
Cad faoi Shocrú Seasta?
Tá an suíomh seasta go leor cosúil le suíomh iomlán. Ríomhtar seasamh an eilimint ar an gcaoi chéanna leis an múnla iomlán, ach socraítear eilimintí seasta san áit sin - beagnach cosúil le comhartha uisce . Ansin déanfaidh gach rud eile ar an leathanach an eilimint sin a scrollú.
Chun an luach maoine seo a úsáid, socródh tú:
seasamh: seasta;Coinnigh i gcuimhne, nuair a shocraíonn tú eilimint i bhfeidhm ar do shuíomh, clóifidh sé san áit sin nuair a phriontáiltear do leathanach Gréasáin. Mar shampla, má shocraítear do ghné ag barr do leathanach, beidh sé le feiceáil ag barr gach leathanach clóite - toisc go bhfuil sé socraithe go barr an leathanaigh. Is féidir leat cineálacha meáin a úsáid chun athrú ar an gcaoi a taispeánann na leathanaigh chlóite eilimintí seasta:
@media screen {h1 # first {position: fixed; }} @media print {h1 # first {position: static; }}Airteagal bunaidh le Jennifer Krynin. Arna eagarthóireacht ag Jeremy Girard ar 1/7/16.