La propiedad position especifica la posición del elemento. Puede contener 4 valores:
- static
- relative
- fixed
- absolute
Un elemento con position: static; no está posicionado de ninguna manera especial, se posiciona de acuerdo con el flujo normal de la página. Es la posición de un elemento por defecto. Si se utiliza este valor, se ignoran los valores de las propiedades top, right, bottom y left .
Un elemento con position: relative; como su nombre lo indica, su posición es relativa a su contenedor
Un elemento con position: fixed (fijo) se posiciona a la ventana del navegador de manera relativa, lo que significa que se mantendrá en el mismo lugar incluso después de hacer scroll en la página.
Un elemento con position: absolute es posicionado fijamente en relación a su contenedor
Los tres valores anteriores de posición están medidos respecto a la esquina superior derecha de la pantalla o en el caso de position: relative de su contenedor, si deseamos cambiar los valores anteriores deberemos acompañar con las propiedades:
Top, left, bottom, right
Lógicamente si usamos un valor positivo en left lo ubicara a la derecha, pero si usamos un valor negativo lo ubicara a la izquierda, igualmente con top.
Recuerda, un elemento "posicionado" es aquel cuyo valor es cualquiera excepto static.
