Posicionamento Absoluto e Bloco Contenedor

Um elemento posicionado de forma absoluta é removido do fluxo normal do documento. Os outros elementos se comportam como se ele não existisse. Ele é posicionado em relação ao seu ancestral posicionado mais próximo.

O bloco de contenção de um elemento posicionado de forma absoluta é seu ancestral mais próximo cujo valor de position seja diferente de static. Se não houver nenhum, o elemento será posicionado em relação ao bloco de contenção inicial (a janela de visualização).

O padrão mais comum é adicionar position: relative ao elemento pai para conter filhos posicionados de forma absoluta.

Com o posicionamento absoluto, top/right/bottom/left são medidos a partir da borda interna do bloco de contenção.

A técnica clássica para centralizar elementos absolutos é:

Por padrão, elementos posicionados de forma absoluta se ajustam ao conteúdo (a menos que width/height sejam definidos). Eles deixam de se expandir para ocupar toda a largura do contêiner, como acontece com elementos de bloco.

Definir as quatro bordas como 0 faz um elemento posicionado de forma absoluta se expandir para preencher o bloco de contenção:

A propriedade inset é um atalho para top, right, bottom e left juntos:

Elementos posicionados de forma absoluta participam de contextos de empilhamento. Use z-index para controlar quais elementos absolutos sobrepostos aparecem na frente.

Se esquecer de adicionar position: relative ao elemento pai, um filho absoluto será posicionado em relação ao ancestral já posicionado mais próximo — geralmente a janela de visualização. Sempre verifique o bloco de contenção.

Um contêiner flex ou grid não é automaticamente um elemento posicionado. Ainda precisa adicionar position: relative explicitamente para transformá-lo em um bloco de contenção para filhos absolutos.

Onde um elemento posicionado de forma absoluta é colocado quando nenhum de seus ancestrais tem um position diferente de static?

Elementos posicionados de forma absoluta saem do fluxo do documento e são posicionados em relação ao ancestral não estático mais próximo. Sempre adicione position: relative ao elemento pai para controlar a posição. Use inset: 0 para expandir um elemento absoluto e preencher seu contêiner.