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:

html<div id="parent">
  <div id="child"></div>
</div>

css#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:

html<div id="parent">
  <div id="child"></div>
</div>

css#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:

html<div id="parent">
  <div id="child"></div>
</div>

css#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.