Positionering ten opzichte van de ouder in CSS

Als een element relative heeft gekregen, en zijn nakomeling - absolute, dan zal deze nakomeling zich positioneren ten opzichte van zijn ouder, en niet ten opzichte van het browservenster.

In zo'n geval krijgt de ouder doorgaans relative zonder verschuivingen. In dit geval gebeurt er niets met deze ouder, maar al zijn nakomelingen zullen zich nu positioneren ten opzichte van hem.

Laten we naar voorbeelden kijken.

Voorbeeld

Laten we om te beginnen gewoon een ouderblok en een nakomelingenblok maken zonder positionering:

<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;
}

Voorbeeld

Laten we het groene blok nu absoluut positioneren. Aangezien de ouder geen relative heeft gekregen, zal de nakomeling zich positioneren ten opzichte van het browservenster:

<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;
}

Voorbeeld

Laten we de ouder nu relative geven. In dit geval zal de nakomeling zich positioneren ten opzichte van zijn ouder:

<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;
}

Praktische taken

In de volgende taken staat het hoofdblok gecentreerd met behulp van margin met de waarde auto, en de andere worden gepositioneerd ten opzichte ervan met behulp van de eigenschap position.