Posicionamiento absoluto — CSS: Posicionamiento de elementos

• ¿Qué es el Posicionamiento Absoluto?
• ¿Cómo afecta el tamaño del elemento?
• ¿Qué pasa si no especificamos top, left, right o bottom?

Ahora que ya entiendes el posicionamiento relativo, es momento de conocer otro tipo de posicionamiento muy útil: el posicionamiento absoluto. Al principio puede parecer un poco más complicado, pero con un poco de práctica verás lo poderoso que es y cómo aplicarlo correctamente.

¿Qué es el Posicionamiento Absoluto?

Para usar el posicionamiento absoluto en un elemento, simplemente aplicamos la propiedad position con el valor absolute:

.absolute {
  position: absolute;
}

<div class="absolute">
    <p>Este bloque tiene posicionamiento absoluto. Si colocas otros elementos dentro, se moverán junto con él.</p>
</div>

A diferencia del posicionamiento relativo, el posicionamiento absoluto saca el elemento del flujo del documento.

¿Qué significa esto? Que el espacio que ocupaba dentro de la página desaparece y otros elementos pueden ocupar su lugar.

Pero si el elemento ya no está en el flujo normal, ¿con respecto a qué se posiciona? Por defecto, se posiciona con base en la esquina superior izquierda de la página, que se considera el punto (0, 0).

Para moverlo, podemos usar las propiedades top, right, bottom y left de la misma forma que con el posicionamiento relativo.

Ejemplo: Ventana Emergente (Modal)

El posicionamiento absoluto es muy común en elementos que deben destacar o flotar sobre el contenido principal del sitio, como las ventanas emergentes. Seguro has visto mensajes que aparecen sobre una página web y hacen que el fondo se oscurezca para atraer tu atención.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

¿Cómo afecta el tamaño del elemento?

Los elementos de bloque con posicionamiento absoluto se comportan de una manera diferente a la habitual:

• Ya no ocupan todo el ancho disponible.
  
• Se adaptan al tamaño de su contenido.
  

Si queremos que un elemento con position: absolute ocupe todo el ancho de la pantalla, podemos asignarle left: 0; y right: 0;. De esta forma, el bloque se estirará de lado a lado.

Ejemplo: Bloque de ancho completo

.full-width {
  position: absolute;
  left: 0;
  right: 0;
  background-color: lightblue;
}

<div class="full-width">
    Este bloque ocupa todo el ancho de la pantalla.
</div>

Puedes ver este comportamiento en acción aquí:

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

¿Qué pasa si no especificamos top, left, right o bottom?

Si un elemento tiene position: absolute, pero no le colocamos valores como top o left, no cambiará de posición inmediatamente. Sin embargo, seguirá estando fuera del flujo, por lo que otros elementos podrán ocupar su lugar y superponerse a él.