Posicionamento absoluto dentro do posicionamento absoluto

Ao trabalhar com layouts de páginas da web, é comum usar técnicas de posicionamento como posicionamento absoluto para organizar os elementos com precisão dentro uma página. No entanto, um possível problema surge quando você tenta aplicar o posicionamento absoluto dentro de um elemento que está posicionado de forma absoluta.

Suponha que você tenha um elemento contêiner (1ª div) com posicionamento relativo (posição:relativo), o que permite que você para posicionar elementos filhos em relação à sua própria posição. Dentro deste contêiner, você tem um elemento absolutamente posicionado (2ª div) e um terceiro elemento absolutamente posicionado (3ª div) aninhado na 2ª div.

Neste cenário, você pode esperar que a 3ª div seja posicionada de forma absoluta em relação à 1ª div, embora a 2ª div também esteja absolutamente posicionada. No entanto, este não é o caso.

Compreendendo a hierarquia de posicionamento

A razão para esse comportamento está na forma como o posicionamento absoluto funciona. Quando um elemento recebe posicionamento absoluto, ele é removido do fluxo normal do documento e, em vez disso, posicionado em relação ao seu ancestral posicionado mais próximo. Neste caso, o 2º div é o ancestral posicionado mais próximo do 3º div, independentemente de o 1º div também ter posicionamento relativo.

Isso significa que a posição absoluta do 3º div é calculada em relação ao 2º a posição da div, não a posição da primeira div. Como resultado, a 3ª div aparecerá absolutamente posicionada dentro da 2ª div, não na 1ª div.

Técnica de posicionamento alternativo

Se você deseja que a 3ª div seja posicionado absolutamente em relação à 1ª div, você precisa torná-la um filho direto da 1ª div. Isso permitirá que o 3º div herde a posição absoluta do 1º div e seja posicionado de acordo.

É importante observar que position: absoluto redefine a posição relativa para filhos assim como position: relativo faz. Portanto, se você tiver vários elementos filhos posicionados de forma absoluta dentro de um elemento pai posicionado relativamente, suas posições serão calculadas de forma independente, em relação ao seu ancestral posicionado de forma absoluta mais próximo.