Suhteellinen positiointi vanhempaan nähden CSS:ssä

Jos elementille on asetettu relative, ja sen lapselle - absolute, niin tämä lapsi positioidaan suhteessa omaan vanhempaansa, eikä suhteessa selainikkunaan.

Yleensä tässä tapauksessa vanhemmalle asetetaan relative ilman siirtoja. Tässä tapauksessa vanhemman kanssa ei tapahdu mitään, mutta kaikki sen lapset positioidaan nyt suhteessa siihen.

Katsotaanpa esimerkein.

Esimerkki

Aluksi tehdään yksinkertaisesti vanhempi-lohko ja lapsi-lohko ilman positiointia:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Esimerkki

Asetetaan nyt vihreä lohko absoluuttisesti positioituun. Koska vanhemmalle ei ole asetettu relative, lapsi positioidaan suhteessa selainikkunaan:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Esimerkki

Asetetaan nyt vanhemmalle relative. Tässä tapauksessa lapsi positioidaan suhteessa omaan vanhempaansa:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: relative;
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Käytännön tehtävät

Seuraavissa tehtävissä pääasiallinen lohko on keskellä käyttäen margin arvona auto, ja muut positioidaan suhteessa siihen käyttäen ominaisuutta position.