Posicionamiento absoluto dentro del posicionamiento absoluto

Al trabajar con diseños de páginas web, es común utilizar técnicas de posicionamiento como el posicionamiento absoluto para organizar elementos con precisión dentro una página. Sin embargo, surge un problema potencial cuando intentas aplicar posicionamiento absoluto dentro de un elemento que en sí mismo está absolutamente posicionado.

Supongamos que tienes un elemento contenedor (1er div) con posicionamiento relativo (posición:relativa), que te permite para colocar elementos secundarios en relación con su propia posición. Dentro de este contenedor, tiene un elemento en posición absoluta (segundo div) y un tercer elemento en posición absoluta (tercer div) anidado dentro del segundo div.

En este escenario, es de esperar que el tercer div esté en posición absoluta. en relación con la 1.ª división, aunque la 2.ª división también esté absolutamente posicionada. Sin embargo, este no es el caso.

Comprensión de la jerarquía de posicionamiento

La razón de este comportamiento radica en la forma en que funciona el posicionamiento absoluto. Cuando a un elemento se le asigna un posicionamiento absoluto, se elimina del flujo normal del documento y, en su lugar, se coloca en relación con su antecesor posicionado más cercano. En este caso, la segunda división es el ancestro posicionado más cercano de la tercera división, independientemente de si la primera división también tiene posicionamiento relativo.

Esto significa que la posición absoluta de la tercera división se calcula en relación con la segunda La posición del div, no la posición del primer div. Como resultado, la tercera división aparecerá absolutamente posicionada dentro de la segunda división, no de la primera división.

Técnica de posicionamiento alternativo

Si desea que la tercera división esté absolutamente posicionado en relación con el 1er div, debe convertirlo en un hijo directo del 1er div. Esto permitirá que el tercer div herede la posición absoluta del primer div y se posicione en consecuencia.

Es importante tener en cuenta que posición: absoluta restablece la posición relativa para los niños tal como lo hace la posición: relativa. Por lo tanto, si tiene varios elementos secundarios en posición absoluta dentro de un elemento principal en posición relativa, sus posiciones se calcularán de forma independiente, en relación con su ancestro en posición absoluta más cercano.