Mae Safleiddio CSS yn fwy na dim ond X, Y Cydlynwyr
Mae gosod CSS ers amser maith yn rhan bwysig o greu gosodiadau gwefannau. Hyd yn oed gyda'r cynnydd o dechnegau gosod CSS newydd fel Flexbox a Grid CSS, mae safle'n dal yn lle pwysig mewn unrhyw fag dylunydd o ddylunydd gwe.
Wrth ddefnyddio gosodiad CSS, y peth cyntaf y bydd angen i chi ei wneud yw sefydlu eiddo CSS ar gyfer sefyllfa i ddweud wrth y porwr os ydych chi'n defnyddio sefyllfa absoliwt neu gymharol ar gyfer elfen benodol. Mae angen i chi hefyd ddeall yn glir y gwahaniaeth rhwng y ddau eiddo lleoli hyn.
Er mai absoliwt a pherthynas yw'r ddau eiddo sefyllfa CSS sy'n cael eu defnyddio yn fwyaf aml mewn dylunio gwe, mae pedwar gwlad yn wir i eiddo'r safle:
- statig
- absoliwt
- perthynas
- sefydlog
Statig yw'r safle diofyn ar gyfer unrhyw elfen ar dudalen we. Os nad ydych chi'n diffinio sefyllfa elfen, bydd yn sefydlog. Golyga hyn y bydd yn cael ei arddangos ar y sgrin yn seiliedig ar ble y mae yn y ddogfen HTML a sut y byddai'n dangos y tu mewn i lif arferol y ddogfen honno.
Os ydych chi'n gwneud cais am reolau gosodiad fel top neu chwith i elfen sydd â sefyllfa sefydlog, anwybyddir y rheolau hynny a bydd yr elfen yn parhau lle mae'n ymddangos yn llif y ddogfen arferol. Mewn gwirionedd, anaml iawn y byddech chi, erioed, angen gosod elfen i sefyllfa sefydlog yn CSS gan mai dyma'r gwerth diofyn.
Sefyllfa Absolute CSS
Mae'n bosib mai sefyllfa absoliwt yw'r sefyllfa CSS hawsaf i'w ddeall. Rydych yn dechrau gyda'r eiddo CSS hwn eiddo:
sefyllfa: absoliwt;Mae'r gwerth hwn yn dweud wrth y porwr y dylid dileu beth bynnag sydd i'w leoli o lif arferol y ddogfen ac yn hytrach ei osod mewn union leoliad ar y dudalen. Cyfrifir hyn yn seiliedig ar hynafwr agosaf agosaf sydd heb ei statws.
Oherwydd bod elfen wedi'i gosod yn llwyr yn cael ei gymryd allan o lif arferol y ddogfen, ni fydd yn effeithio ar sut y mae'r elfennau o'r blaen neu ar ôl iddo yn yr HTML wedi'u lleoli ar y dudalen we.
Fel enghraifft - os oedd gennych adran a oedd wedi'i leoli gan ddefnyddio gwerth cymharol (byddwn yn edrych ar y gwerth hwn yn fuan), ac yn y tu mewn i'r adran honno, roedd gennych baragraff yr oeddech am ei osod 50 picsel o ben y rhanbarth, chi yn ychwanegu gwerth sefyllfa "absoliwt" i'r paragraff hwnnw ynghyd â gwerth gwrthbwyso 50px ar yr eiddo "top", fel hyn.
sefyllfa: absoliwt; top: 50px;Yna byddai'r elfen hon wedi'i gosod yn gyfan gwbl bob amser yn arddangos 50 picsel o ben yr is-adran honno'n gymharol - ni waeth beth arall sy'n ei ddangos yno mewn llif arferol. Defnyddiodd yr elfen "gwbl" â'i safle cymharol ei safle fel ei gyd-destun ac mae'r gwerth positif a ddefnyddiwch yn gymharol â hynny.
Y pedwar eiddo lleoli sydd gennych ar gael i'w defnyddio yw:
- top
- yn iawn
- gwaelod
- chwith
Gallwch ddefnyddio naill ai'r brig neu'r gwaelod (gan na ellir gosod elfen yn ôl y ddau werthoedd hyn) a naill ai ar y dde neu'r chwith.
Os gosodir elfen i sefyllfa o absoliwt, ond nid oes ganddo unrhyw hynafiaid sydd heb eu gosod yn statig, yna bydd yn cael ei leoli mewn perthynas â'r elfen gorff, sef elfen lefel uchaf y dudalen.
Sefyllfa Gymharol
Soniasom eisoes am leoliad cymharol, felly gadewch i ni edrych ar yr eiddo hwnnw nawr.
Mae lleoliad cymharol yn defnyddio'r un pedwar eiddo lleoli fel lleoliad absoliwt, ond yn hytrach na seilio sefyllfa'r elfen ar ei hynafiaeth agosaf agosaf nad yw'n statig, mae'n cychwyn o ble fyddai'r elfen pe bai'n dal yn y llif arferol.
Er enghraifft, os oes gennych dri pharagraff ar eich tudalen we, ac mae gan y drydedd arddull "perthynas: gymharol" a osodir arno, caiff ei sefyllfa ei wrthbwyso yn seiliedig ar ei leoliad presennol.
Paragraff 1.
Paragraff 2.
Paragraff 3.
Yn yr enghraifft uchod, bydd y trydydd paragraff wedi'i leoli 2em o ochr chwith yr elfen cynhwysydd, ond bydd yn dal i fod yn is na'r ddau baragraff cyntaf. Byddai'n aros yn llif arferol y ddogfen, a dim ond yn cael ei wrthbwyso ychydig. Os ydych wedi ei newid i safle: absoliwt; byddai unrhyw beth yn ei dilyn yn arddangos ar ei ben ei hun, oherwydd na fyddai bellach yn llif arferol y ddogfen.
Defnyddir elfennau ar dudalen we yn aml i osod gwerth o safbwynt: yn gymharol heb unrhyw werth gwrthbwyso a sefydlwyd, sy'n golygu bod yr elfen honno'n parhau'n union lle y byddai'n ymddangos yn y llif arferol. Gwneir hyn yn unig i sefydlu'r elfen honno fel cyd-destun y gellir gosod elfennau eraill yn llwyr. Er enghraifft, os oes gennych is-adran sy'n ymwneud â'ch gwefan gyfan gyda gwerth dosbarth "cynhwysydd" (sy'n senario cyffredin iawn mewn dylunio gwe), gellir gosod yr is-adran honno i safle cymharol fel y gall unrhyw beth y tu mewn ohono ddefnyddio fel cyd-destun sefyllfa.
Beth am Safleoedd Sefydlog?
Mae sefyllfa sefydlog yn debyg iawn i leoliad absoliwt. Cyfrifir sefyllfa'r elfen yn yr un ffordd â'r model absoliwt, ond yna caiff elfennau sefydlog eu gosod yn y lleoliad hwnnw - bron fel dyfrnod . Yna bydd popeth arall ar y dudalen yn sgrolio heibio'r elfen honno.
I ddefnyddio'r gwerth eiddo hwn, byddech yn gosod:
sefyllfa: sefydlog;Cofiwch, pan fyddwch yn gosod elfen ar waith ar eich gwefan, bydd yn argraffu yn y lleoliad hwnnw pan fydd eich tudalen We wedi'i argraffu. Er enghraifft, os yw'ch elfen wedi'i phennu ar frig eich tudalen, bydd yn ymddangos ar frig pob tudalen argraffedig - oherwydd ei fod wedi'i osod i ben y dudalen. Gallwch ddefnyddio mathau cyfryngau i newid sut mae'r tudalennau printiedig yn arddangos elfennau sefydlog:
@media screen {h1 # first {position: fixed; }} @media print {h1 # first {position: static; }}Erthygl wreiddiol gan Jennifer Krynin. Golygwyd gan Jeremy Girard ar 1/7/16.