Como utilizar position en CSS

Definición de .position utilizado en CSS

La propiedad .position puede ayudarlo a manipular la ubicación de un elemento, por ejemplo:

Esta propiedad de CSS se emplea de la siguiente manera:

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

Otro ejemplo más avanzado de .position es el siguiente de CODEPEN:

position: static|absolute|fixed|relative|sticky|initial|inherit;

Valor	Descripción	Manifestación
estático	Valor por defecto. Los elementos se representan en orden, tal como aparecen en el flujo del documento
absoluto	El elemento se coloca en relación con su primer elemento antecesor posicionado (no estático)
fijado	El elemento se coloca en relación con la ventana del navegador.
pariente	El elemento se coloca en relación con su posición normal, por lo que "left:20px" agrega 20 píxeles a la posición IZQUIERDA del elemento.
pegajoso	El elemento se posiciona en función de la posición de desplazamiento del usuario. Un elemento pegajoso alterna entre `relative` y `fixed` , dependiendo de la posición de desplazamiento. Se coloca en relación hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica; luego, se "pega" en su lugar (como posición: fija). Nota: No compatible con IE/Edge 15 o anterior. Compatible con Safari a partir de la versión 6.1 con el prefijo -webkit-.
inicial	Establece esta propiedad en su valor predeterminado.
heredar	Hereda esta propiedad de su elemento principal.

Los números de la tabla especifican la primera versión del navegador que es absolutamente compatible con la propiedad.

Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.

Property	Chrome	Internet Explorer / Edge	Firefox	Safari	Opera
quotes	11.0	8.0	1.5	5.1	4.0