CSS. Posicionamiento de elementos

Este tutorial le ayudará a aprender la posición de CSS correctamente.

La propiedad de posición es utilizada para colocar un elemento en el lugar necesario en la pantalla. Vamos a ver qué opciones tenemos.

Estática

Los elementos HTML son colocados estáticamente de forma predeterminada (por defecto). Un elemento estático siempre se coloca de acuerdo con circulación normal de la página.

Los elementos estáticos no son afectados por las propiedades superiores, inferiores, izquierdos y derechos.

No hay necesidad de especificar la posición estática en el fichero CSS menos que sea necesario restablecer otro valor de posición, que fue configurado abtes.

	div.a{
    	position:static;
        }

Relativa

Un elemento relativo se coloca con relación a su posición normal. Puede afectar a la posición del elemento mediante las propiedades "top" y "left".

	div.b{
    	position:relative;
        top:20px;
        left:20px;
        }

El contenido de los elementos relativos puede ser movido y colocado encima de otros elementos, pero el espacio reservado para el elemento se queda en circulación normal.

Los elementos relativos son generalmente utilizados como bloques principales (parent blocks) de los absolutos.

Absoluta

Un elemento de posición absoluta se coloca con relación al primero elemento principal (parent) que tiene una posición no estática. Si no se encuentra este elemento, el bloque de contenido es .

	div.c{
    	position: absolute;
        top:20px;
        left:20px;
        }

La siguiente imagen muestra el funcionamiento de div con la clase "c" y en posición absoluta en caso de que se coloca en div con la clase "b" y en posición relativa.

A continuación puede encontrar el ejemplo cuando el elemento en posición absoluta no tiene una posición relativa.

Fija

Un elemento con posición fija se coloca con relación a la ventana del navegador. No se mueva, incluso si la ventana se desplaza.

	div.c{
    	position: fixed;
        top:20px;
        left:20px;
        }

Los elementos fijos son quitados de la circulación normal. El documento y otros elementos fucnionan como si el elemento fijo no exista.

Usted puede aprender más sobre el posicionamiento de los elementos del siguiente artículo