Propiedad position

Ejemplos de uso

Según el estándar CSS 2.1, los elementos de una página HTML se colocan utilizando alguno de los tres algoritmos de posicionamiento siguientes:

• Posicionamiento normal o "Normal flow": comprende el posicionamiento de los elementos de bloque, los elementos en línea y el posicionamiento relativo aplicado con la propiedad position: relative.
• Posicionamiento flotante o "Floats": primero se coloca la caja en su posición normal (utilizando el anterior tipo de posicionamiento) y después se saca de esa posición para colocarlo lo más a la derecha (float: right) o lo más a la izquierda (float: left) posible.
• Posicionamiento absoluto o "Absolute positioning". In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

Los elementos que utilizan el posicionamiento flotante o el posicionamiento absoluto se dice que están "out of the flow".

La propiedad position, junto con la propiedad float, permite modificar la posición de cualquier elemento de la página. La especificación CSS 2.1 define cuatro formas diferentes de calcular la posición de un elemento mediante la propiedad position, que se corresponden con los cuatro valores permitidos para esta propiedad: static, relative, absolute y fixed.

El valor static corresponde al posicionamiento normal y es el que los navegadores aplican por defecto a todos los elementos de una página. En este caso, para mostrar cada elemento sólo se tiene en cuenta si es un elemento de bloque (<div> y <p> por ejemplo) o si es un elemento en línea (<img> y <a> por ejemplo).

Si el elemento es de bloque, empieza en una nueva línea y ocupa todo el sitio disponible hasta el final de la línea en la que se encuentra. Si el elemento es en línea, ocupa solamente el espacio necesario para que se vean sus contenidos.

Cuando un elemento está posicionado de forma static, no se tienen en cuenta los valores de sus propiedades top, right, bottom y left.

El valor relative también se corresponde al posicionamiento normal. No obstante, a diferencia del valor static, el posicionamiento relative desplaza a las cajas respecto de su posición original. Este desplazamiento no afecta al resto de elementos de la página, por lo que se pueden producir solapamientos y efectos no deseados.

El estándar de CSS 2.1 indica que la propiedad position: relative no está definida para aquellos elementos cuya propiedad display sea table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell y table-caption.

Para saber cómo desplazar un elemento respecto de su posición original, consulta los ejemplos de las propiedades top, right, bottom y left.

El valor absolute corresponde al posicionamiento absoluto. En este caso, la referencia respecto de la que se desplaza un elemento no es su posición original, sino los bordes superior/inferior/derecho/izquierdo del elemento en el que se encuentra, es decir, de su elemento padre.

Consulta los ejemplos de las propiedades top, right, bottom y left para saber cómo posicionar de forma absoluta un elemento.

Por último, el valor fixed es una variante del posicionamiento absoluto. La posición inicial del elemento se calcula de la misma manera que con la propiedad position: absolute. La diferencia es que una vez posicionado, el elemento ya no se mueve nunca de esa posición. Si haces scroll en la página del navegador, el elemento siempre se muestra en la misma posición de la pantalla.

Al imprimir una página HTML que contiene un elemento posicionado de forma absoluta, todas las páginas mostrarán el mismo elemento en la misma posición. Puedes aprovechar esta característica para imprimir documentos en varias páginas que deban contener elementos comunes como cabeceras y pie de páginas.