CSS-тегінің ата-анаға қатысты позициялануы

Егер элементке relative орнатылса, ал оның ұрпағына - absolute орнатылса, онда бұл ұрпақ браузер терезесіне емес, өзінің ата-анасына қатысты позицияланады.

Әдетте, бұл жағдайда ата-анаға ығысуларсыз relative көрсетіледі. Бұл жағдайда ата-анамен ештеңе болмайды, бірақ оның барлық ұрпақтары енді оған қатысты позицияланады.

Мысалдарды қарастырайық.

Мысал

Алдымен, позициялаусыз ата-ана блогын және ұрпақ блогын жасайық:

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

Мысал

Енді жасыл блокты абсолютті позициялайық. Ата-анаға relative көрсетілмегендіктен, ұрпақ браузер терезесіне қатысты позицияланады:

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

Мысал

Енді ата-анаға relative орнатайық. Бұл жағдайда ұрпақ өзінің ата-анасына қатысты позицияланады:

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

Практикалық тапсырмалар

Келесі тапсырмаларда негізгі блок ортада margin қолданылып тұр auto мәнінде, ал қалғандары оған қатысты позицияланады position қасиетін қолдана отырып.