Posicionamiento absoluto dentro de la posición absoluta

Tengo 3 divelementos.

El primero dives más grande (envoltura) y tieneposition:relative;

El segundo divse posiciona de forma absoluta al primer divposicionamiento relativo (y se incluye en el primero div)

El tercero divestá contenido en el segundo divy también tiene posicionamiento absoluto.

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

¿Por qué la 3ª divposición es absoluta a la 2ª div(que también es la posición absoluta a la 1ª div) y no a la 1ª divque tiene posición relativa?

Porque el tercero dives el posicionamiento absoluto al segundo posicionado absoluto div.

Porque position: absoluterestablece la posición relativa para los niños al igual que lo position: relativehace.

No hay forma de evitar esto: si desea que el tercero divesté absolutamente posicionado con respecto al primero, tendrá que convertirlo en un hijo del primero.

Ambos position:relativey position:absoluteestablecen elementos contenedores como ascesores de posicionamiento.

Si necesita que div 3 se coloque en función de div 1, conviértalo en un hijo directo de div 1.

Tenga en cuenta que position: relativesignifica que el elemento está posicionado en relación con su posición natural y position: absolutesignifica que el elemento está posicionado en relación con su primero position:relativeo position:absoluteantepasado .

Posición estática: la posición estática es la forma predeterminada en que aparecerá un elemento en el flujo normal de su archivo HTML si no se especifica ninguna posición.

Importante: top, right, bottomy leftpropiedades no tienen efecto sobre A posición estática ELEMENT.

Posición relativa: posicionar un elemento con el valor relativo mantiene el elemento (y el espacio que ocupa) en el flujo normal de su archivo HTML.

A continuación, puede mover el elemento en alguna cantidad usando las propiedades left, right, topy bottom. Sin embargo, esto puede hacer que el elemento se superponga a otros elementos que están en la página, lo que puede ser el efecto que desea o no.

Un elemento relativamente posicionado puede moverse de su lugar, pero el espacio que ocupaba permanece.

Posición absoluta: la aplicación del valor de posición absoluta a un elemento lo quita del flujo normal. Cuando mueve el elemento posicionado absoluto, su punto de referencia es la parte superior / izquierda del elemento contenedor más cercano que tiene una posición declarada distinta de estática, también llamado contexto de posicionamiento más cercano. Por lo tanto, si no existe ningún elemento contenedor con una posición que no sea estática, se colocará desde la esquina superior izquierda del elemento del cuerpo.

En su caso, el contenedor contenedor más cercano del tercero es el segundo.

Sin embargo, otra respuesta aclaratoria.

Su escenario actual es este:

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

Y estás luchando con eso.

Si puede cambiar el HTML, simplemente haga esto:

#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 */

La razón por la que el tercer divelemento está absolutamente posicionado en el segundo divelemento es porque, como explica la especificación CSS aquí , se debe a que el elemento "padre" (mejor dicho: bloque que contiene) de un elemento absolutamente posicionado no es necesariamente su elemento padre inmediato, más bien su elemento posicionado inmediato , es decir, cualquier elemento cuya posición se establezca en cualquier cosa menos, staticpor ejemplo,position: relative/absolute/fixed/sticky;

Por lo tanto, siempre que sea posible en su código, si desea que el tercer divelemento esté absolutamente posicionado con respecto al primero div, debe establecer su segundo divelemento como position: static;su valor predeterminado (o simplemente eliminar cualquier position: ...declaración en el conjunto de reglas de su segundo divelemento) .

Lo anterior hará que el 1º sea divel bloque contenedor del 3º absolutamente posicionado div, ignorando el 2º divpara este propósito de posicionamiento.

Espero eso ayude.

En caso de que alguien todavía esté buscando una respuesta a esto.

Pude lograr este resultado agregando un clear: both;estilo al primer div absolutamente posicionado que reinició al niño y le permitió usar su propio absoluteposicionamiento.