_15.32.30.png)
Position nos permite controlar como se ubicará un elemento dentro del documento HTML. Se acompaña de las propiedades top, right, bottom y left para poder funcionar. Posee 4 valores validos:
El valor static hace que el elemento se posicione de forma normal, es el valor por defecto. En este caso las propiedades top, right, bottom y left no tienen ninguna función ya que el elemento no se comportará de forma diferente a su comportamiento por default. Un ejemplo gráfico:
En el caso en cuestión vemos como el cuadrado amarillo se ubica al lado de los demas como lo hace siempre por default
El valor relative hace que el elemento se posicione de forma normal, ocupando su espacio correspondiente dentro del documento pero ahora si nosotros podemos darle una ubicación relativa con top, right, bottom y left. Un ejemplo gráfico:
_15.36.47.png)
Como podes ver, el espacio original del elemento sigue existiendo pero ahora con las propiedades lo fuimos moviendo.
El valor absolute hace que el elemento no se posicione dentro del documento, es decir que el espacio para este deje de existir, y se vaya ubicando según las propiedades top, right, bottom y left. Un ejemplo gráfico:
_15.39.59.png)
El espacio que tenia el elemento en los otros dos ejemplos acá no existe. Y al mismo lo movemos con las propiedades de movimiento.
El valor fixed hace que el elemento no se posicione dentro del documento, es decir que el espacio que este tenia deje de existir. Lo podemos ubicar con las propiedades top, right, bottom y left y además se quedará ahi incluso si hacemos scroll en la página. Es decir que va a quedar justamente como lo indica su nombre fijado en la página. Un ejemplo gráfico:
Como vemos el elemento queda fijo a pesar de que lo movamos con un scroll.
Como vemos el elemento queda fijo a pesar de que lo movamos con un scroll.
El valor sticky mantiene el elemento en su posición y esta vez no usaremos los valores left, right, bottom y top para moverlo sino para decidir cuanto espacio de margin tendrán al momento de scrollear ya que en este caso, el elemento quedará fijado a la pantalla cuando scrolleamos. Un ejemplo gráfico:
En este caso, el elemento queda fijo en la parte superior, este efecto se ve mucho en algunos headers