Guía completa y práctica sobre posicionamiento CSS: position absolute

¡Hola gente bonita!👋

En el articulo anterior explique el posicionamiento relative, este trabaja frecuentemente en conjunto con el posicionamiento absolute.

El posicionamiento absolute hace que un elemento se coloque respecto a su contenedor posicionado mas cercano, si no encuentra ningún contenedor cercano, el elemento se colocara respecto al viewport.

El viewport es el área disponible en la pantalla del navegador (sin contar la interfaz del navegador, como botones, barra de menú, etc.) es decir, es el área donde se mostrara la pagina web o el espacio para renderizar el documento web.

Si tenemos un elemento con position: absolute y si ese elemento esta dentro de un contenedor que también este posicionado con los valores relative, absolute, fixed o sticky, el elemento se va a colocar respecto a ese contenedor, pero si el contenedor no esta posicionado, entonces el elemento se colocara respecto al viewport.

Cuando a un elemento le colocamos el valor absolute, ese elemento no conserva su espacio en el flujo, todo el espacio que tuviera reservado para ese elemento desaparece.

↕️↔️ top, right, bottom, left

Recordemos que cada elemento HTML contiene su propio sistema de coordenadas local (top, right, bottom y left).
Por ejemplo, si desea colocar un elemento hijo dentro de un elemento padre ya situado en algún lugar de su documento HTML, el hijo heredará el sistema de coordenadas del padre, que tiene su origen en la esquina superior izquierda del elemento padre (0x0).

Esto puede demostrarse con el siguiente ejemplo:

Ejemplo 1️⃣

Una de mis características favoritas de CSS cuando se trata de posicionamiento absoluto es poder definir el origen de la ubicación de un elemento, basado en cualquiera de las cuatro esquinas del contenedor.
En el siguiente ejemplo tenemos un contenedor que esta posicionado como relative y dentro de el hay varios elementos que están posicionado como absolute.

 <div class="container">
   <div class="box-1">1</div>
   <div class="box-2">2</div>
   <div class="box-3">3</div>
   <div class="box-4">4</div>
   <div class="box-5">5</div>
</div>

 .container {
    position: relative;
    width: 500px;
    height: 200px;
    border: 2px dashed black;
}

[class^="box"] {
    width: 120px;
    height: 50px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}

.box-1 {
    position: absolute;
    background-color: hsl(0deg, 100%, 50%);
}

.box-2 {
    position: absolute;
    top: 0;
    right: 0;
    background-color: hsl(30deg, 100%, 50%);
}

.box-3 {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: hsl(60deg, 80%, 50%);
}

.box-4 {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: hsl(120deg, 70%, 50%);
}

.box-5 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: hsl(180, 60%, 50%);
}

💡 Recuerda que puedes utilizar las propiedades left, right, top y bottom para cambiar la ubicación de los elementos. Pero no puedes usar left junto con right, o top junto con bottom en el mismo elemento por razones obvias.

Como puedes observar la ultima caja esta centrada, para lograr este resultado tienes que colocar todas las propiedades top, right, bottom y left con el valor 0, pero si no colocamos la declaración margin: auto el elemento no podrá estar centrado.

Si aplicamos un margen al contenedor padre para desplazarlo, este se moverá junto con sus elementos hijos.

Si eliminamos el contenedor, los elementos se colocaran respecto al viewport.
Si al contenedor padre lo colocamos separado o por fuera de los elementos hijos, aun así los elementos se colocaran respecto a el, ya que buscan al ancestro mas cercano.

Ejemplo 2️⃣

Si un elemento no tiene dimensiones declaradas, sus dimensiones se ajustan al contenido. En el siguiente ejemplo el segundo encabezado <h1 class="title-2">Lupita Code</h1> tiene un posicionamiento absoluto, sabemos que es un elemento de bloque lo que quiere decir que por defecto ocupa todo el ancho de la pagina, pero al agregar la declaración position: absolute ya no ocupara el 100% sino que va a ser lo que ocupe el texto del <h1></h1>.

<h1 class="title">Lupita Code</h1>
<h1 class="title-2">Lupita Code</h1>

.title {
    background-color: yellow;
}

.title-2 {
    position: absolute;
    background-color: lightblue;
}

Como puedes observar en la imagen, el primer encabezado tiene un posicionamiento estático por defecto por lo tanto ocupa todo el ancho posible de la pagina y el segundo tiene un posicionamiento
absoluto.
Ambos encabezados están colocados respecto al viewport y no tienen dimensiones declaradas.

Si tienes un elemento que sus dimensiones están calculas según su contenido esto podría romper la maquetación. En este ejemplo el ancho de un elemento posicionado como absoluto esta definido por su contenido.

Ejemplo 3️⃣

En el ejemplo anterior, se movió la caja hacia el centro respecto a su contenedor padre, esto también lo podemos hacer junto con la propiedad transform.

<div class="container">
  <div class="box"></div>
</div>

.container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 2px dashed black;
}

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); ⬅️
    width: 60px;
    height: 60px;
    background-color: lightblue;
}

Esta es otra forma de centrar un elemento en CSS usando el position: absolute y la propiedad transform, aunquetambién funcionaria si el elemento hijo fuera relative

Ejemplo 4️⃣

¿Qué pasaría si a un elemento inline le aplicamos el valor absolute?🤔
Sabemos que los elementos en línea no admiten dimensiones (width, height) solo ocupan lo que tengan en su contenido, por lo tanto no podemos cambiar su tamaño a menos que se cambie su comportamiento agregando la declaración display: block o display: inline-block.

En este ejemplo tenemos un elemento <span></span> que por defecto es un elemento inline, no vamos a colocar la propiedad display solo la declaración position: absolute y solo con esto podemos cambiar el tamaño del elemento, vamos a comprobarlo:

<span class="text">Lupita code</span>

.text {
    position: absolute;
    width: 200px;
    height: 100px;
    padding: 2em;
    text-align: center;
    background-color: hsl(30deg, 100%, 50%);
}

📋 Conclusión

☑️ El elemento es posicionado respecto al ancestro mas cercano que también este posicionado, si no encuentra ninguno tomara como referencia el viewport.
☑️ Al posicionar el elemento como absoluto se habilitan las propiedades top, right, bottom, left y z-index.
☑️ La posición absoluta se usa frecuentemente en conjunto con la posición relativa y esto tambien es muy usado cuando se hacen dibujos en CSS.
☑️ El elemento no conserva su espacio en el flujo, todo el espacio que se tuviera considerado para ese elemento desaparece.
☑️ Las dimensiones del elemento se adaptan al contenido, excepto si defines width y height.
☑️ Los elementos posicionados de forma absoluta pueden moverse y superponerse sobre otros elementos.

🔎Recursos:

• Position | MDN
• Viewport | Desarrollo web

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok