Posicionamiento absoluto y bloque contenedor

Un elemento posicionado de forma absoluta queda fuera del flujo normal del documento. Los demás elementos se comportan como si no existiera. Se posiciona con respecto a su antecesor posicionado más cercano.

El bloque contenedor de un elemento posicionado de forma absoluta es su antecesor más cercano cuyo valor de position sea distinto de static. Si no existe ninguno, el elemento se posiciona con respecto al bloque contenedor inicial (la ventana gráfica).

El patrón más habitual consiste en añadir position: relative al elemento principal para contener los elementos secundarios posicionados de forma absoluta.

Con el posicionamiento absoluto, top/right/bottom/left se miden desde el borde interior del relleno del bloque contenedor.

La técnica clásica para centrar elementos posicionados de forma absoluta es:

De forma predeterminada, los elementos posicionados de forma absoluta se ajustan al tamaño de su contenido (shrink-wrap), a menos que se establezcan width o height. Ya no se extienden para ocupar todo el ancho de su contenedor como los elementos de bloque.

Establecer los cuatro bordes en 0 extiende un elemento posicionado de forma absoluta hasta llenar su bloque contenedor:

La propiedad inset es una abreviatura conjunta de top, right, bottom y left:

Los elementos posicionados de forma absoluta participan en contextos de apilamiento. Utilice z-index para controlar qué elementos absolutos superpuestos aparecen por encima.

Si olvida añadir position: relative al elemento principal, un elemento secundario absoluto se posicionará con respecto al antecesor ya posicionado más cercano, que a menudo es la ventana gráfica. Compruebe siempre el bloque contenedor.

Un contenedor flex o grid no es automáticamente un elemento posicionado. Aún debe añadir explícitamente position: relative para convertirlo en un bloque contenedor de los elementos secundarios absolutos.

¿Dónde se coloca un elemento posicionado de forma absoluta si ninguno de sus antecesores tiene un valor de position distinto de static?

Los elementos posicionados de forma absoluta salen del flujo del documento y se posicionan con respecto a su antecesor no estático más cercano. Añada siempre position: relative al elemento principal para controlar la ubicación. Utilice inset: 0 para extender un elemento absoluto hasta llenar su contenedor.