Guía completa y práctica sobre posicionamiento CSS: Position relative

¡Hola gente bonita!👋

En el articulo anterior hice una pequeña introducción sobre conceptos clave que tienes que saber antes de entender la propiedad position y sus diferentes valores. En este articulo voy a explicar primero como funciona el posicionamiento relativo.

Un elemento con posicionamiento relative, es posicionado relativo a su posición normal, es decir, el elemento se coloca relativo al flujo normal.

↕️↔️ top, right, bottom, left

Las propiedades top, right, bottom y left pueden ser usadas para especificar como la caja a dibujar será desplazada, estas propiedades aceptan valores positivos y negativos.

Ejemplo1️⃣

En el código HTML creamos un <article></article> que será el contexto en donde estará situado el elemento <h1></h1>



<article>
  <h1>Lupita Code</h1>
</article>

En el código CSS solo colocaremos la propiedad position con su valor relative, recordemos que los encabezados tienen un margen por defecto así que le agregamos el valor 0



/* Contexto */
article {
    border: 3px dashed red;
}
/* Elemento */
h1 {
    position: relative; ⬅️
    border-top: 2px solid black;
    margin: 0;
    background-color: lightblue;
}

Como puedes observar cuando agregamos la declaración: position: relative; visualmente no pasa nada, el elemento va a seguir exactamente en el mismo sitio donde se encuentra, pero podemos manipular sus coordenadas si declaramos las siguientes propiedades: top,right,bottom y left.
Entonces vamos a mover el elemento en relación a la parte superior, para ello vamos hacer uso de la propiedad top:



h1 {
    position: relative;
    top: 50px; ⬅️
    border-top: 2px solid black;
    margin: 0;
    background-color: lightblue;
}

Como puedes observar cuando el elemento se mueve, va a quedar un espacio vacío o una especie de hueco, es decir, conserva su espacio. El espacio que ese elemento ocupaba sigue estando ahí. Podemos decir entonces que al mover el elemento conserva su espacio reservado.

Pero, ¿Qué pasa si también agregamos la propiedad bottom?🤔



h1 {
    position: relative;
    top: 50px; ✅
    bottom: 1000px; ❌
    border-top: 2px solid black;
    margin: 0;
    background-color: lightblue;
}

A pesar de que agregamos el valor de 1000px a la propiedad bottom el elemento no se movió, sigue estando con el valor de 50px, ¿por que?🤔 la respuesta es que las propiedades top y left tienen mayor prioridad sobre right y bottom, en este ejemplo la propiedad top siempre le va a ganar a bottom.

Si también agregamos la propiedad left y después la propiedad right, left siempre le va a ganar a right, no se puede colocar ambas, tienes que elegir una de las dos, lo mismo ocurre con las propiedades top y bottom. Aunque las colocáramos antes no funcionaria.

📖 Esto lo podemos comprender cuando leemos un libro, siempre vamos a leer de arriba hacia abajo y de izquierda a derecha.

Tal vez te preguntaras si esto tiene que ver con la cascada, pero no es así, aquí no se aplica la cascada, porque la cascada solo se aplica a las mismas propiedades.

Por ejemplo, si declaramos otra propiedad top: 100px; ganaría esta ultima ya que aquí si se aplica por cascada:



h1 {
    position: relative;
    top: 50px;  ❌
    top: 100px; ✅
    border-top: 2px solid black;
    margin: 0;
    background-color: lightblue;
}

Ejemplo 2️⃣

Ahora vamos a utilizar porcentajes como unidad, estos se comportan diferente a los pixeles, en el siguiente ejemplo se muestra la diferencia:



 <section class="context">
   <div class="box-1">top: 50%</div>
 </section>
 <section class="context">
   <div class="box-2">top: 50px</div>
 </section>



.context {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 5em 1em;
    border: 2px dashed black;
}

div {
    padding: 10px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    background-color: #ff6e6c;
}

.box-1 {
    position: relative;
    top: 50%; ⬅️
}

.box-2 {
    position: relative;
    top: 50px; ⬅️
}

Como puedes observar en la imagen, los porcentajes se basan en el tamaño de su contenedor padre.
Si usamos porcentajes en top o bottom y sus valores son negativos, el elemento no se mueve de su lugar.

Ejemplo 3️⃣

Vamos a continuar con el ejemplo anterior, ahora ¿Qué pasaría si al padre no le declaro una altura?. Vamos a modificar el CSS y eliminaremos la altura (height) del contexto padre de ambas cajas, recordemos que para mover estas cajas, una de ellas usa porcentajes (en top) y la otra pixeles (en top):



.context {
    /* Eliminamos el height */
    display: inline-block;
    width: 200px;
    margin: 5em 1em;
    border: 2px dashed black;
}

Si los valores de top o bottom están en porcentajes, el elemento se va a desplazar solo si el padre tiene un alto declarado de lo contrario el elemento no se va a mover.

Ejemplo 4️⃣

¿Qué pasaría si en lugar de declarar la propiedad height solo colocamos la propiedad min-height? Seguiremos usado el ejemplo anterior para explicar lo siguiente:



.context {
    display: inline-block;
    width: 200px;
    min-height: 200px; ⬅️
    margin: 5em 1em;
    border: 2px dashed black;
}

Como puedes observar en la imagen, la primera caja con la declaración top: 50%; no se movió de su lugar, esto se debe a que internamente en el DOM el elemento tiene un alto mínimo pero no tiene un alto definido, esto se soluciona si también le añades la propiedad height.
Esto solo sucede con la altura, ya que con la anchura no tiene ningún efecto.

🔄 z-index

Ejemplo 5️⃣

Digamos que ya sabemos como funciona la colocación de los elementos HTML en la pantalla en dos dimensiones (X e Y.) Aun así, nos encontraremos con casos en los que tendremos que elegir algunos elementos para que aparezcan "encima" de los demás. Es ahí donde entra la propiedad z-index al rescate.



  <div class="box-1">Caja 1</div>
  <div class="box-2">Caja 2</div>

En el CSS agregamos la declaración position: relative; y la propiedad z-index:



.box-1,
.box-2 {
    width: 100px;
    height: 100px;
    margin: auto;
    text-align: center;
}

.box-1 {
    position: relative;
    top: 50px;
    left: 50px;
    z-index: 10;
    background-color: lightblue;
}

.box-2 {
    position: relative;
    background-color: blueviolet;
}

Cuando declaramos el z-index la caja 1 se dibuja por encima de la caja 2, esto es porque tiene un valor mayor que el que tiene por defecto que es 0, es decir, si no declaramos el z-index su valor por defecto es 0.

Aunque no especifiques el z-index los elementos van aparecer según el orden en el código HTML y esto tiene que ver con el flujo normal que ya explique en el capitulo anterior.

📋 Conclusión

☑️ El elemento es posicionado relativo a su posición normal.
☑️ Al posicionar el elemento como relativo se habilitan las propiedades top, right, bottom, left y z-index.
☑️ Usaremos posición relativa cuando queramos mover ligeramente la posición del elemento.
☑️ La posición relativa se usa frecuentemente en conjunto con la posición absoluta.
☑️ Al mover el elemento conserva su espacio reservado.
☑️ El elemento conserva sus dimensiones originales.
☑️ El contenido de elementos posicionados de forma relativa pueden moverse y superponerse sobre otros elementos.
☑️ Si los valores de top o bottom están en porcentajes, el elemento se va a desplazar solo si el padre tiene un alto declarado de lo contrario no va a pasar nada.