Propiedad Position en CSS

Esta propiedad siempre puede provocar confusión ya se ha durante el aprendizaje o el desarrollo de un sitio web. La Propiedad Position en CSS nos permite cambiar el comportamiento y la posición de un elemento, sin embargo, no todos sabemos el uso correcto de las opciones.

Así que veremos cuales son las opciones y sus diferencias entre si.

Position

Es una propiedad de CSS que nos permite posicionar un elemento con respecto a los demás. Una de sus características es que dependiendo del valor de la propiedad, el elemento cambia la referencia que usa para posicionarse.

Los posibles valores para esta propiedad son Static, Absolute, Fixed y Relative.

Static

Este valor lo tienen por defecto todos los elementos, no es necesario definirlo. Se respeta el flujo normal de la pagina, es decir, se posicionan en el orden en que se vayan agregando. En este caso no se toman en cuenta las propiedades como left,right,top y bottom.

Relative

Este atributo permite posicionar el elemento conforme al flujo normal, la diferencia es que podemos usar las propiedades top,left,right y bottom para colocarlo en donde queramos. En otras palabras podemos moverlo  pero tomara como referencia su posición por defecto.

Absolute

Con este atributo podemos romper el flujo del documento. Cuando definimos un elemento como absolute podemos definir top,bottom,righty left, la diferencia con relative es que en este caso al romper el flujo el posicionamiento empieza desde el inicio del sitio web (Ventana del navegador) o del elemento que tenga un posición diferente a , siempre y cuando se ha padre del que queremos posicionar.

Fixed

Los elementos con este valor se quedan fuera del flujo normal de la pagina.Este elemento se convierte en flotante, por lo mismo no se va a mover de ninguna manera, por lo tanto no acepta ninguna de las propiedades left,top,bottom o right.

Lo que sucede con estos elementos, es que cuando nos desplazamos por la pagina con la barra de desplazamientos este no desaparece como los demás elementos. Uno de sus usos mas conocidos son los menús fijos.

Espero que esta información se ha de utilidad para poder “acomodar ” los elementos en nuestra pagina web con mayor facilidad. SI tienen alguna duda o comentario pueden dejarlo en los comentarios.  También si quieren que escribamos sobre un tema específico pueden decirnos.