Tipos de elementos: Antes de empezar a hablar del posicionamiento es importante distinguir los elementos como se comportan ya que esto influye en la manera que los veremos por pantalla.
1. Elementos en linea: estos elementos ocupan solo lo que ocupa su contenido. Estos elementos son: ,,,,,,, ,,, ,,,, ,,, ,,,,,
2. Elementos en bloque: estos elementos ocupan el espacio de una linea completa aunque por su contenido no se complete. Estos elementos son : ,,, ,,,, ,,, ,,,, ,,, ,,,,,
Los navegadores posicionan las etiquetas que escribimos con HTML como si fueran cajas. Estas cajas dependiendo si son elementos en linea o bloque se colocan uno al lado del otro o se coloca en la siguiente linea. Por lo que si queremos colocar algún elemento en un lugar determinado de nuestra web tenemos que utilizar las características CSS. Para este fin tenemos la característica .
position
Valores
1. static. Por defecto todos los elementos tienen este posicionamiento. Cada elemento se coloca según si son elementos en linea o en bloque. Si se utiliza esta posición se ignoran los valores de las propiedades ,, ,,.
2. relative. Este posicionamietno permite que la caja de un elemento se pueda desplazar de su posicionamiento normal. El desplazamiento de este elemento no influye en el estado de los elementos que se encuentren alrededor. Su desplazamiento se realiza con las propiedades ,, ,,. Destacar que los valores pueden ser negativos y podemos usar las unidades (más información) que queramos.
Ejemplo
See the Pen position:relative by Bernardo Martin (@bermartinv) on CodePen.
Ejemplo
See the Pen postion:relative>position:absolute by Bernardo Martin (@bermartinv) on CodePen.
3. absolute. La caja del elemento se coloca en la posición que le indiquemos usando las propiedades ,, ,,. El resto de elementos que contiene nuestra web ocupan el lugar de la caja del elemento que le hemos dado la nueva posición.
Ejemplo
See the Pen position:absolute>position:relative by Bernardo Martin (@bermartinv) on CodePen.
Ejemplo
See the Pen position:absolute by Bernardo Martin (@bermartinv) on CodePen.
4. fixed. El elemento se elimina del flujo del documento como sucedía con la posición. Los elementos que tengan este posicionamiento el elemento no depende de sus elementos padre sino que depende del posicionamiento del documento. Además lo podemos colocar usando las propiedades ,, ,,.
Ejemplo
See the Pen position:fixed by Bernardo Martin (@bermartinv) on CodePen.
5. inherit. El valor de posición no se hereda en forma de cascada a aquellos elementos que están dentro uno de otro. Por lo que podemos forzarlo dandole este tipo de posición, heredando el tipo de posicionamiento que tenga su elemento padre.
