Sijoittaminen absoluuttiseen vanhempaan CSS:ssä

Edellisessä oppitunnissa havaitsimme, että jos vanhemmalle asetetaan relative, niin sen lapsielementit sijoittuvat absoluuttisesti suhteessa siihen. Tätä käytetään useimmiten, kun ei haluta, että vanhemman elementti putoaa normaalista virtauksesta.

Voi myös olla, että vanhemmalle on asetettu absolute. Tässä tapauksessa lapsielementit, joilla on absolute, sijoittuvat myös suhteessa tällaiseen vanhempaan, eivät suhteessa selainikkunaan:

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

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

Tee neliönmuotoinen lohko, jolla on absoluuttinen sijoittaminen, kooltaan 400px. Sen sisällä tee kaksi muuta lohkoa, kooltaan 50px. Sijoita ensimmäinen lohko vanhemman oikeaan yläkulmaan ja toinen lohko - vanhemman vasempaan alakulmaan.