Position-ominaisuus

Ominaisuus position määrittää elementtien sijoittelutavan. Tätä ominaisuutta käytetään useimmiten yhdessä ominaisuuksien top, right, bottom, left, kanssa, jotka asettavat marginaalit ylhäällä, oikealla, alhaalla, vasemmalla vastaavasti.

Syntaksi

valitsija {
	position: absolute | relative | fixed | static | sticky;
}

Arvot positionille

Arvo	Kuvaus
`absolute`	Absoluuttinen sijoittelu. Elementti poistetaan asiakirjan normaalista virtauksesta ja sijoitetaan lähimmän sijoitellun esi-isän suhteen (jos sellainen on) tai selainikkunan suhteen.
`relative`	Suhteellinen sijoittelu. Elementti siirretään normaaliasennosta suhteessa asiakirjan virtauksessa, mutta tila, jonka se miehitti, pysyy varattuna.
`fixed`	Kiinteä sijoittelu. Elementti poistetaan asiakirjan normaalista virtauksesta ja sijoitetaan selainikkunan suhteen. Pysyy paikallaan sivua vieritettäessä.
`static`	Staattinen sijoittelu. Arvo tarkoittaa sijoittelun puuttumista ja elementti käyttäytyy normaalisti.
`sticky`	Tahmea sijoittelu. Elementti käyttäytyy kuin `relative`, kunnes se saavuttaa annetun sijainnin vierityksen yhteydessä, minkä jälkeen se kiinnittyy määritettyyn paikkaan (kuin `fixed`).

Oletusarvo: static.

Esimerkki . Absoluuttinen sijoittelu

Sijoitetaan elementti näytön vasempaan yläkulmaan pienin marginaalein:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Esimerkki . Absoluuttinen sijoittelu

Nyt sijoitetaan elementti näytön oikeaan yläkulmaan pienin marginaalein:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Esimerkki . Kiinteä sijoittelu

Kiinteällä sijoittelulla elementti pysyy paikallaan sivua vieritettäessä:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Esimerkki . Suhteellinen sijoittelu

Suhteellisessa sijoittelussa elementti siirtyy normaaliasennosta suhteessa, mut muut elementit käyttäytyvät niin, kuin elementtiä ei olisi siirretty:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Esimerkki . Sisäkkäin asettelu

Jos vanhemman ominaisuudella position on arvo relative, niin absoluuttisesti sijoitellut elementit sijoitetaan suhteessa vanhempaan:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Esimerkki . Sisäkkäin asettelu

Jos vanhemman ominaisuudella position on arvo absolute, niin absoluuttisesti sijoitellut elementit sijoitetaan suhteessa vanhempaan:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Esimerkki . Tahmea sijoittelu

Jos elementin ominaisuudella position on arvo sticky, niin elementti käyttäytyy kuin relative, kunnes se saavuttaa annetun sijainnin vierityksen yhteydessä, minkä jälkeen se kiinnittyy paikkaan. Tehdään tahmea otsake:

<h1>Pääsivuston otsikko</h1>

<div class="header">otsake otsake otsake</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Esimerkki . Ilman sijaintia

Jos elementille annetaan absoluuttinen sijoittelu ilman sijainnin määrittämistä, elementti pysyy siinä paikassa, missä se oli ilman sijoittelua, mutta muut elementit lakkaavat huomioimasta sitä:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Esimerkki . Yksi akseli

Absoluuttisessa sijoittelussa voidaan määrittää sijainti vain yhtä akselia pitkin. Esimerkiksi, jos määritämme ominaisuuden top, niin pystysuunnassa elementti asettuu haluttuun sijaintiin, mutta vaakasuunnassa se pysyy paikallaan, siellä missä se oli:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Esimerkki . Kaikki sijainnit

Absoluuttisessa sijoittelussa voidaan määrittää sijainnit kaikilta puolilta, ilman leveyden ja korkeuden asettamista. Tässä tapauksessa elementti asettuu vanhemman lohkon keskelle:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Katso myös

ominaisuus z-index,
joka määrittää elementtien päällekkäin asettelun