CSS: Munurinn á staðsetningareiginleikum

Í fyrri færslu minni skrifaði ég um skjástöðu og hvernig það hjálpar þér að skipuleggja þættina á síðunni með CSS. Til að stjórna frekar hvar þátturinn þinn er nákvæmlega á síðunni geturðu notað aðra CSS eign sem kallast staða. Þetta mun gera grein fyrir staðsetningu frumefnisins ásamt skjáareigninni.

Staðaeignin er aðeins meira ruglingsleg en skjánum. Ekki hafa áhyggjur að þú ert ekki sá eini sem veit ekki hvað hver staða gerir fyrir þáttinn þinn. Vonandi hjálpar þessi færsla að skýra þessi loðnu svæði.

Hægt er að staðsetja þætti með settu topp-, botn-, vinstri- og hægri gildi miðað við hvar það væri venjulega á síðunni og stundum á síðunni sjálfri. Staðaeiginleikinn ræður hins vegar hvar þeim er raðað á síðunni. Það eru nokkrir staðaeiginleikar:

  • Static: Sjálfgefin staða fyrir hvern þátt. Það er engin skilgreind staða og frumefnið flæðir inn á síðuna eins og venjulega. Þú þarft ekki að tilgreina þetta stöðugildi nema þú reynir að hnekkja fyrri settri stöðu. Til dæmis, ef vefsíðan þín er byggð á ramma með áður settum sjálfgefnum stöðum.
  • Hlutfall: Hlutfallslega staðsettir þættir geta haft stöðu svo lengi sem viðbótareiginleikarnir: efst, neðst, vinstri og hægri eru stillt. Viðbótareignin mun laga hlutinn frá venjulegri stöðu. Engin tóm rými eru búin til þegar þú notar þessa stöðu. Með þessari stöðu geturðu einnig notað z-vísitölueignina. Sjálfgefið (gildi: sjálfvirkt), þá mun þátturinn birtast ofan á allar aðrar stöður sem eru staðsettar með stöðluðum hætti.

* Athugasemd: Þú getur aðeins notað z-vísitölu eignina á staðsetta þætti. Þessi eign virkar ekki á staðanlega staðsetta þætti. Z-vísitala stjórnar stafla röð þinna. Þú getur breytt z-vísitölugildinu til að stjórna útliti stakstakkans. Hærri z-vísitala myndi setja frumefnið fyrir framan annan þátt með lægri stafla röð og öfugt.

  • Fastur: Hlutinn sem er algerlega staðsettur er staðsettur miðað við gluggann á skoðunarglugganum / vafranum og hann helst í sömu stöðu jafnvel þegar skrunað er á síðuna. Ef þú notar þessa stöðu og ert með flex sem skjáinn þinn, þá virkar alger staðsetning samt á flexílátum. Samt sem áður, alger staðsetning átök við flex börn (á flex gám).
  • Algjört: Algjörlega staðsetta hlutinn er staðsettur miðað við næsta staðsettan forfaðir (foreldri / gámur þátturinn) Ef það er enginn forfeðraþáttur þá staðsetur frumefnið sig miðað við skjalahlutann. Ólíkt föstu stöðunni, með hreinum, færist þátturinn með síðunni þegar þú flettir. Með algerri staðsetningu er frumefnið fjarlægt úr flæði annarra þátta á skjalinu. Þetta þýðir að algerlega staðsettur þáttur hefur ekki áhrif á aðra þætti á síðunni þinni og öfugt.
  • Fljóta: Krækir texta um myndir og var notað til að staðsetja meira á annað hvort vinstri eða hægri hlið blaðsins.
  • Hreinsa: Færir flotna þætti annað hvort til vinstri eða hægri eða báða til að ýta niður efninu og láta innihaldið birtast á eftir flotnu hlutanum. Þú getur líka fært fljótandi hlutinn í inline-start eða inline-end.

Athugaðu muninn á staðaeiginleikum sjónrænt og þetta er ítarlegri skjöl um CSS staðsetningu.