CSS staðsetning er meira en bara X, Y Hnit
CSS staðsetning hefur lengi verið mikilvægur þáttur í að búa til vefútlit. Jafnvel með hækkun nýrra CSS skipulag tækni eins og Flexbox og CSS rist, staðsetning hefur enn mikilvægt stað í hvaða poki vefhönnuður er af bragðarefur.
Þegar þú notar CSS staðsetningu er það fyrsta sem þú þarft að gera er að koma á CSS eigninni til að segja frá vafranum ef þú ætlar að nota alger eða hlutfallsleg staðsetning fyrir tiltekinn þátt. Þú þarft einnig að skilja greinilega muninn á þessum tveimur staðsetningareiginleikum.
Þó alger og ættingja eru tvær CSS staðsetningarhæfileikar oftast notaðar í vefhönnun, þá eru í raun fjórar ríki á eignarstöðu:
- truflanir
- alger
- ættingi
- fastur
Static er sjálfgefið staða fyrir hvaða þátt á vefsíðu. Ef þú skilgreinir ekki stöðu frumefni verður það truflað. Þetta þýðir að það birtist á skjánum byggt á hvar það er í HTML skjalinu og hvernig það myndi birtast innan venjulegs flæðis þess skjals.
Ef þú notar staðsetningarreglur eins og efri eða vinstri til þáttar sem er með truflanir, þá verða þessar reglur hunsaðar og þátturinn verður áfram þar sem hann birtist í venjulegum skjalflæði. Í raun myndi þú sjaldan, ef nokkru sinni, þurfa að setja frumefni í kyrrstöðu í CSS þar sem það er sjálfgefið gildi.
Alger CSS staðsetning
Alger staðsetning er líklega auðveldasta CSS staðsetningin til að skilja. Þú byrjar með þessum CSS staða eign:
staða: alger;Þetta gildi segir vafranum að það sem er að fara að vera staðsett ætti að fjarlægja frá venjulegu flæði skjalsins og í staðinn sett á nákvæmlega stað á síðunni. Þetta er reiknað á grundvelli nánasta stéttarfélagsins sem ekki er stillt í stéttinni.
Vegna þess að algerlega staðsettur þáttur er tekinn út úr venjulegu flæði skjalsins mun það ekki hafa áhrif á hvernig þættirnir fyrir hana eða eftir það í HTML eru staðsettar á vefsíðunni.
Sem dæmi - ef þú átt deild sem var staðsett með því að nota gildi ættingja (við munum líta á þetta gildi í stuttu máli) og innan þess deildar átti þú málsgrein sem þú vildir setja 50 punkta frá efstu deildinni, þú myndi bæta við staðsetningargildi "alger" við þá málsgrein ásamt jafnvirði 50 punkta á "efstu" eigninni, eins og þetta.
staða: alger; toppur: 50px;Þessi algerlega stakur þáttur myndi þá alltaf sýna 50 punkta frá efstu hlutanum sem er tiltölulega staðsettur - sama hvað annað birtist þar í venjulegri flæði. "Algerlega" staðsettur þátturinn þinn notaði tiltölulega stakan einn sem samhengi og staðsetningargildi sem þú notar er miðað við það.
Fjórar staðsetningareiginleikar sem þú hefur aðgang að eru:
- efst
- rétt
- neðst
- vinstri
Þú getur notað annaðhvort efst eða neðst (þar sem ekki er hægt að stilla frumefni samkvæmt báðum þessum gildum) og annaðhvort hægri eða vinstri.
Ef frumefni er stillt á algera stöðu en þar hefur það ekki forfeður sem ekki eru stilltir, þá verður það staðsettur miðað við líkamshlutann, sem er hæsta stigi frumefnisins á síðunni.
Hlutfallsleg staðsetning
Við nefndum nú þegar hlutfallslega staðsetningu, svo við skulum skoða þessi eign núna.
Hlutfallsleg staðsetning notar sömu fjögur staðsetningareiginleika og alger staðsetning en í stað þess að byggja stöðu frumefnisins á nánast óstöðluðu forfaðirinn byrjar það frá því að frumefni væri ef það væri enn í venjulegu flæði.
Til dæmis, ef þú hefur þrjá málsgreinar á vefsíðunni þinni og þriðji hefur "staða: ættingja" stíl sett á það, verður staðsetning hennar byggð á móti núverandi staðsetningu.
Liður 1.
Liður 2.
Í dæminu hér að ofan verður þriðja málsgreinin staðsett 2em frá vinstri hlið gámahlutans, en verður enn undir fyrstu tveimur málsgreinum. Það myndi vera í eðlilegum flæði skjalsins og bara vega upp á móti lítillega. Ef þú breyttir því í stöðu: alger; allt sem fylgir því myndi birtast ofan á það, því það myndi ekki lengur vera í venjulegu flæði skjalsins.
Eiginleikar á vefsíðu eru oft notaðar til að stilla gildi staða: hlutfallslegt án nettengingar, sem þýðir að frumefni er nákvæmlega þar sem það virðist í venjulegri flæði. Þetta er gert einvörðungu til að koma því á framfæri sem samhengi sem aðrir þættir geta komið fyrir algerlega. Til dæmis, ef þú ert með deild í kringum alla vefsíðuna þína með bekkjarverðmæti "ílát" (sem er mjög algengt í vefhönnun), þá er hægt að stilla þá deilingu að hlutfallslegri stöðu þannig að allt inni í henni geti notað það sem staðsetning samhengi.
Hvað um fast staðsetning?
Fast staðsetning er eins og alger staðsetning. Staða frumefnisins er reiknuð á sama hátt og alger líkan en fastar þættir eru síðan fastar á þeim stað, næstum eins og vatnsmerki . Allt annað á síðunni mun þá fletta yfir það atriði.
Til að nota þetta eignarverð myndi þú setja:
staða: fastur;Hafðu í huga þegar þú lagar frumefni á síðuna þína, mun það prenta á þeim stað þegar vefsíðan þín er prentuð út. Til dæmis ef efnið þitt er fast efst á síðunni þinni birtist það efst á hverjum prentuðu síðu - því það er fast efst á síðunni. Þú getur notað fjölmiðla til að breyta því hvernig prentaðar síður sýna fasta þætti:
@media skjár {h1 # fyrst {staða: fast; }} @media prenta {h1 # fyrst {staða: truflanir; }}Upprunaleg grein af Jennifer Krynin. Breytt af Jeremy Girard á 1/7/16.