Guía completa y práctica sobre posicionamiento CSS: Position relative
Tags: css, html, spanish, latam
Published: 2021-05-17 20:03:59

¡Hola gente bonita!👋

En el [articulo anterior](https://dev.to/lupitacode/guia-completa-y-practica-sobre-posicionamiento-css-fundamentos-17c) 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;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ff8f3lw6zqavji01kp06.png)

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;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of6srsyjy10lrbhvf1up.png)

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;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of6srsyjy10lrbhvf1up.png)

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; ⬅️
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5plwb2fhhnhvhf8x75y.png)

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;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l43lsnrlwxkx5yjo8ga1.png)

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;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twkzqur2azxdt100az22.png)

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;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8osjxm2751kpsz0bbir.png)

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.

##🔎Recursos:
* [Position | MDN](https://developer.mozilla.org/es/docs/Web/CSS/position)

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

[▶️Youtube](https://www.youtube.com/lupitacode)
[📷Instagram](https://instagram.com/lupitacode)
[🐦Twitter](https://twitter.com/lupitacode)
[🔵Facebook](https://facebook.com/lupitacode)
[🔲Codepen](https://codepen.io/lupitacode/)
[✍️Medium](https://lupitacode.medium.com/)
[🎵Tik Tok](https://www.tiktok.com/@lupitacode)