Artigo original: How to understand CSS Position Absolute once and for all

Escrito por: Marina Ferreira

Pare de perder seus elementos na tela entendendo como um objeto se encontra onde ele deve estar

Posicionar um elemento de modo absoluto tem mais a ver com a posição do contêiner do elemento do que com a própria posição. Para se posicionar, é preciso saber com relação a qual div pai o elemento se posicionará.

O código abaixo mostra quatro divs aninhadas. De .box-1 a .box-3, todas estão centralizadas usando apenas display: flex e margin: auto. .box-4 não tem margin definida, e está em sua posição padrão no fluxo do documento.

<body>
  <div class="box-1">
    <div class="box-2">
      <div class="box-3">
        <div class="box-4">
        </div>
      </div>
    </div>
  </div>
</body>

A propriedade position não está definida nos elementos.

body {
  display: flex;
}

.box-1,.box-2,.box-3 {
  display: flex;
  margin: auto;
}
u9GyvXp81914z3hJb5bSL3rcjE62v4ZKOnIn
.box-4 está na posição padrão

Para poder ser posicionado, um elemento precisa conhecer duas coisas:

  • as coordenadas para sua posição em x e em y position definidas por top, right, bottom e/ou left
  • em relação a qual elemento pai ele se posicionará

Ao aplicar position: absolute a .box-4, o elemento é removido do fluxo normal do documento. Como suas coordenadas não estão definidas, ele simplesmente fica na posição padrão, que é o canto superior esquerdo do seu elemento pai.

fGJYLQ7rKPWPOZj3qzsp-nxyBUvTRbiSfMYe
.box-4 com position: absolute, mas sem deslocamento.

Ao definirmos top: 0 e left: 0, o elemento precisa saber qual o elemento pai que ele deve considerar como elemento de referência. Para ser uma referência, o elemento pai precisa ser posicionado na tela usando position: relative. .box-4, então, começa a procurar por algum elemento div pai que esteja posicionado. Primeiro, ele pergunta a .box-3, que dá a ele uma resposta negativa. A mesma coisa ocorre com .box-2 e depois com .box-1, pois, em todos eles, não há uma propriedade position definida.

Como .box-4 não conseguiu encontrar um elemento pai posicionado, ele se posiciona com relação a body. Esse elemento está sempre posicionado na tela:

tjeIL8YkyGBlzTpwCapPcQTfOptpdBXzWc2U
.box-4 com position: absolute e os elementos pai sem position definida.

Se colocarmos position: relative em .box-1, quando .box-4 começar a perguntar se há algum elemento pai posicionado, receberá de .box-1 uma resposta afirmativa. Então, .box-4 será posicionado em relação a .box-1 :

OgWq2g7Wm468076IPANHhE7HIYODqUQkUpAv
.box-4 com position: absolute e .box-1 com position: relative.

A mesma coisa valeria para .box-2 e .box-3 .

O elemento posicionado com position: absolute se posicionará relativo ao seu ancestral posicionado (com position: relative) mais próximo.

Ao encontrar  um ancestral posicionado, a posição dos elementos acima dele deixa de ser relevante. As imagens abaixo mostram o layout ao definir position: relative em .box-2 e em .box-3, respectivamente:

rBN0SYpLuSJUUnxJMPu4N0TguV3gNYBQ30Vr
eYzaYiMTTqnqSqZHYIs3g6q6uVbOmO0GX6IN
.box-4 com position: absolute e.box-2 e .box-3 com position: relative, respectivamente.

Você também poderá encontrar uma explicação em vídeo no canal Code Sketch, no YouTube.

Obrigado pela leitura! ✌️

Publicação original em marina-ferreira.github.io.

qKShNDloz66ZcWplME6mkPXlYDLYUhs6bxsC