Posicionamento relativo ao elemento pai em CSS

Se um elemento tiver relative definido, e seu elemento filho tiver absolute, então este filho será posicionado em relação ao seu elemento pai, e não em relação à janela do navegador.

Geralmente, neste caso, o elemento pai é definido como relative sem deslocamentos. Nesta situação, nada acontece com este pai, mas todos os seus elementos filhos agora serão posicionados em relação a ele.

Vamos ver alguns exemplos.

Exemplo

Para começar, vamos simplesmente criar um bloco pai e um bloco filho sem posicionamento:

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

Exemplo

Agora vamos posicionar absolutamente o bloco verde. Como o elemento pai não tem relative definido, o elemento filho será posicionado em relação à janela do navegador:

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

Exemplo

Vamos agora definir relative para o elemento pai. Neste caso, o elemento filho será posicionado em relação ao seu elemento pai:

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

Tarefas Práticas

Nas tarefas a seguir, o bloco principal está centralizado usando margin com o valor auto, e os outros são posicionados em relação a ele usando a propriedade position.