Позиціювання щодо батька на 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.

Повторіть сторінку за цим зразком: