CSS position static: el flujo normal del código HTML

Para crear páginas Web y plantillas de blogs es necesario organizar el espacio que ocupa cada elemento del código HTML. Para ello existen varias propieadades de CSS que nos ayudarán, pero la principal es la propiedad position. Pero si te has fijado un poco, podrás observar que hay páginas Web escritas con código HTML que no utilizan esta propiedad de CSS y sí que se muestran ordenadas. Esto se debe a que hay un orden predeterminado que siguen los navegadores si no se les da ninguna otra instrucción. Este orden es lo que se llama "flujo normal del código HTML" y es el mismo orden que adopta un sitio al que se le asigne el valor static en la característica position. En este post vamos a explicar como se ordena de forma natural una página Web y que características de CSS podemos usar para mover los elementos que tienen una posición estática.

El flujo normal del código HTML

Cuando un navegador lee el código de una página Web, sigue un par de reglas.

• Las etiquetas que están dentro de otras, son elementos que también se representan en su interior.
• Los elementos del mismo nivel se representan apilados, de arriba a abajo, excepto algunos elementos especiales que se colocan en horizontal dentro del texto, ordenados de izquierda a derecha. 

El primer elemento que encuentre el navegador en el código HTML lo situará arriba a la izquierda, y a continuación colocará dentro todos los elementos hijos. Cuando lea el segundo elemento del mismo nivel, lo pondrá abajo. Si tratas de imaginarlo gráficamente una página Web es como un conjunto de cajas apiladas, normalmente una encima de otra formando niveles, aunque a veces hay algunas cajas que se colocan en el mismo nivel. 

Cajas o elementos en bloque.

Estos elementos son los que ocupan toda una franja horizontal, y se colocan apilados unos encima de otros.

• Por defecto se coloca bajo de los elementos anteriores.
• Con la característica width, le podemos dar un valor de amplitud. Si no se le da ningún valor, ocupará todo el espacio disponible en la horizontal (dentro siempre de su contenedor).
• Con la característica , le podemos dar un valor de altura. Si no se le da ningún valor, ocupará todo lo que necesite para mostrar su contenido y sus elementos secundarios.
• Se puede alinear horizontalmente, a la izquierda, a la derecha, automático o centrado.

Algunos elementos de bloque son:

• Los titulares <h1>, <h2>...
• Los párrafos de texto <p> y los elementos <div>.
• Las etiquetas semánticas de HTML5 <header>, <footer>, <aside>, <article>...
• Las listas <ul> y <ol>, y sus elementos <li>.
• Las tablas <table>.

Cajas o elementos en línea.

Estos elementos se colocan en una misma línea uno al lado de otro, excepto en el caso de que no quepan en un única línea. Entonces desbordarán y pasarán a la siguiente línea.

• Son elementos que fluyen con el texto, por lo que se pueden situar dentro de ellos, insertándose a la derecha del último carácter.
• Está sujeto a la propiedad white-space del código CSS.
• Ignora las propiedades de ancho y alto, su tamaño depende del contenido y el espacio disponible.
• Ignora los valores de los márgenes superiores e inferiores.

Algunos elementos de bloque son:

• Elementos <span>
• Los enlaces <a>
• Las imágenes <img>
• Las celdas de una tabla <td>
• Las etiquetas de formato como <b> <i>, que en la actualidad ya no se usan en el código HTML estricto y se gestionan desde el código CSS.

De esta forma cuando añades a un elemento la propiedad CSS position: static, lo que haces es señalarle que se sitúe abajo del elemento que está situado justo antes de él.

Imagen: sin copyright.