Posicionamento absoluto dentro da posição absoluta

Eu tenho 3 divelementos.

O primeiro divé maior (embrulhar) e temposition:relative;

2º divé posicionado de forma absoluta ao 1º divposicionamento relativo (e está incluído no 1º div)

O 3º divestá contido no 2º dive também possui posicionamento absoluto.

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

Por que a 3ª divposição é absoluta para a 2ª div(que também é posição absoluta para a 1ª div) e não a 1ª divque tem posição relativa?

Porque a 3ª divé o posicionamento absoluto para a 2ª posição absoluta div.

Porque position: absoluteredefine a posição relativa para crianças assim comoposition: relative faz.

Não há como contornar isso - se você quiser que o terceiro divseja absolutamente posicionado em relação ao primeiro, terá que torná-lo filho do primeiro.

Ambos position:relativeeposition:absolute estabelecem elementos de conteúdo como ascestores de posicionamento.

Se você precisa que div 3 seja posicionado com base em div 1, torne-o um filho direto de div 1.

Observe que isso position: relativesignifica que o elemento está posicionado em relação à sua posição natural e position: absolutesignifica que o elemento está posicionado em relação à sua primeiro position:relativeou position:absoluteancestral .

Posição estática: a posição estática é a forma padrão como um elemento aparecerá no fluxo normal do seu arquivo HTML se nenhuma posição for especificada.

Importante: top, right, bottome leftpropriedades não têm efeito sobre A estará estática elemento.

Posição relativa: posicionar um elemento com o valor relativo mantém o elemento (e o espaço que ocupa) no fluxo normal de seu arquivo HTML.

Você pode então mover o elemento por uma certa quantidade usando as propriedades left, right, tope bottom. No entanto, isso pode fazer com que o elemento se sobreponha a outros elementos que estão na página - o que pode ou não ser o efeito que você deseja.

Um elemento posicionado relativamente pode mover-se de seu lugar, mas o espaço que ocupou permanece.

Posição absoluta: aplicar o valor da posição absoluta a um elemento remove-o do fluxo normal. Quando você move o elemento posicionado de forma absoluta, seu ponto de referência é a parte superior / esquerda de seu elemento contendo mais próximo que tem uma posição declarada diferente de estática - também chamado de contexto de posicionamento mais próximo. Portanto, se nenhum elemento recipiente com uma posição diferente de estática existir, ele será posicionado no canto superior esquerdo do elemento do corpo.

No seu caso, o terceiro contêiner mais próximo é o segundo.

Mais uma resposta esclarecedora.

Seu cenário atual é este:

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

E você está lutando com isso.

Se você puder alterar o HTML, basta fazer o seguinte:

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

A razão pela qual o terceiro divelemento está absolutamente posicionado no segundo divelemento é porque, como a especificação CSS explica aqui , é porque o elemento "pai" (melhor dito: contendo o bloco) de um elemento absolutamente posicionado não é necessariamente seu elemento pai imediato, mas em vez disso, seu elemento imediatamente posicionado , ou seja, qualquer elemento cuja posição seja definida como qualquer coisa, exceto staticpor exemploposition: relative/absolute/fixed/sticky;

Portanto, sempre que possível em seu código, se você deseja que o terceiro divelemento seja absolutamente posicionado em relação ao primeiro, divvocê deve fazer o seu segundo divelemento como o position: static;seu valor padrão (ou simplesmente remover qualquer position: ...declaração no conjunto de regras do seu segundo divelemento) .

A descrição acima fará o primeiro diva bloco contendo do 3º posicionado de forma absoluta div, ignorando a segunda divpara este fim posicionamento.

Espero que ajude.

Caso alguém ainda esteja procurando uma resposta para isso.

Consegui atingir esse resultado adicionando um clear: both;estilo ao primeiro div posicionado absolutamente que redefiniu a criança e permitiu que ela usasse seu próprio absoluteposicionamento.