Позиционирање во однос на родителот во 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.