Position CSS

La propiedad position dentro del lenguaje CSS se utiliza para modificar el posicionamiento de un elemento en nuestra página web; sin embargo, solo no es suficiente para lograr el objetivo: por lo tanto, se usa con otras propiedades direccionales: top,right,bottom,left y z-index. 

En total, la propiedad position tiene 5 valores posibles:

• static: cada elemento tiene una posición estática por defecto (este es, por tanto, el valor por defecto). El elemento, por lo tanto, seguirá el flujo normal de la página: si se ha establecido un índice de posición izquierda/derecha/arriba/abajo/z, no habrá ningún efecto en ese elemento. Para que la posición cambie, se debe cambiar el valor.

• relative: la posición original de un elemento permanece en el flujo del documento, al igual que el valor estático. Pero ahora funcionará el índice izquierdo/derecho/arriba/abajo/z. Las propiedades posicionales "mueven" el elemento desde su posición original en esa dirección, pero dejan la posición original ocupada y la superponen con los demás elementos de la página.
• absolute: el artículo se elimina del flujo de documentos y se reposiciona según los pedidos. Los otros elementos se comportarán como si, en el espacio de origen, el elemento ya no estuviera allí, mientras que todas las demás propiedades posicionales trabajarán sobre él.
• fixed: el elemento se elimina del flujo del documento cuando los elementos se colocan de forma absoluta. De hecho, se comportan casi igual, excepto que los elementos de posición fija siempre son relativos a la ventana del navegador, no a un padre en particular, y no se ven afectados por el desplazamiento. Para que quede claro, quedan "fijos" -de hecho- en la posición que les demos.
• sticky: el elemento se trata como en el caso del valor "relativo", hasta que la posición de desplazamiento de la ventana de visualización alcance un umbral especificado; en ese punto, el elemento asume una posición fija en la que se le dice que permanezca.

¿Confundido? ¡No te preocupes! Veamos algunos ejemplos prácticos para despejar la mente.

Position Relative

CSS:

.element {
  position: relative;
  top: 20px;
}

HTML:

<h1 class=”element”>Curso de coding </h1>
<h2>Como convertirte en desarrollador web </h2>

En comparación con su posición original, el elemento de arriba ahora se desplazará hacia abajo 20px.
Vemos como el título ahora se ha superpuesto al subtítulo y, sobre todo, el espacio que originalmente ocupaba el título se ha mantenido ocupado.

Position Absolute

Estructura HTML:

<div class="parent">
 Elemento Padre
 <div class="element">Elemento Hijo </div>
</div>

CSS:

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

Si un elemento secundario tiene un valor absoluto, el elemento principal se comportará como si el elemento secundario no estuviera allí.
Cuando intentamos establecer otros valores como “izquierda, “abajo” y “derecha", encontraremos que el hijo no responde a las dimensiones de su padre, sino a las del documento.
Para asegurarnos de que el elemento secundario esté posicionado absolutamente con respecto al elemento principal, debemos establecer la posición del elemento principal para que sea diferente de la estática:

.parent {
  position: relative;
}

Las propiedades como izquierda, derecha, inferior y superior ahora se refieren al elemento principal, por lo que ahora veremos el elemento secundario colocado justo en la base del elemento principal.
Intentemos darle estilo:

.parent {
  color: white;
  padding: 70px;
  position: relative;
  background-color: #0074d9;
}

.element {
  background-color: rgba(0,0,0,.3);
  padding: 20px;
  color: rgba(255,255,255,.4);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

Como puedes ver al probar este código, todo lo que le mostramos ya se ha hecho.

Position Fixed

El valor "fixed" es similar al "absoluto", ya que puede ayudar a posicionar un elemento en cualquier punto relativo a la ventana: de hecho, el elemento con posición fija no se ve afectado por el desplazamiento de la página.
Un ejemplo clásico de un elemento con una posición fija es la barra de navegación que se desplaza con la página o el clásico botón de chat ubicado en la parte inferior derecha de la página.

HTML:

<div class="navbar">Navbar</div>

CSS:

.navbar {
  background-color: #40a6ff;
  padding: 20px;
  color: rgba(255,255,255,0.9);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

Position Sticky

El valor "sticky" es un compromiso entre los valores "relative" y "fixed".
¿Qué hace? Permite posicionar un elemento con respecto a cualquier punto del documento y luego, una vez que el usuario ha pasado por un punto determinado de la ventana, fijar la posición del elemento para que permanezca visualizado permanentemente como un elemento con una position fixed.

Veamos un ejemplo:
La estructura HTML:

<header>
  <h1>Products</h1>
</header>

<nav class="nav-sticky">
  <ul>
    <li><a href="#hoses">Hoses</a></li>
    <li><a href="#rakes">Rakes</a></li>
    <li><a href="#shovels">Shovels</a></li>
  </ul>
</nav>

<article>
Lorem ipsum dolor sit amet…
</article>

CSS:

header {
  background: hotpink;
  color: #fff;
  display: flex;
  height: 70vh;
  justify-content: center;
  align-items: center;
}

.nav-sticky {
  position: sticky;
  top: 0px;
  z-index: 1000;
}

article {
   background-color : pink;
   font-size: 2rem;
   height: 200vh;
}

En el ejemplo, el elemento se colocará relativamente hasta que la posición de desplazamiento de la ventana de visualización llegue a un punto en el que el elemento estará a 50 px de la parte superior de la ventana de visualización. En ese momento, el elemento se vuelve "pegajoso" y permanece en una posición fija a 50 px desde la parte superior de la pantalla.

Z-Index

Deleitándonos con las distintas posiciones, podríamos encontrarnos con algunos problemas de superposición de los elementos. Para resolver estos problemas debemos usar la propiedad z-index que modifica la posición en el eje z, es decir la profundidad.
En los ejemplos anteriores, de hecho, hemos insertado en nuestra barra de navegación la propiedad z-index con un valor de 1000 para que ningún otro elemento se superponga a nuestra barra de navegación. Un z-index mayor, implicará que nuestro elemento se encuentra en primer plano respecto a uno de menor z-index, que estará por debajo.