Position, left y top

Estilo CSS position

Position en el estilo determina una posición para esa capa. Esta posición puede ser estática, absoluta o relativa. A continuación vamos a pasar a explicarte las tres:

Valor “position: static”

La posición “static” es el valor predefinido por defecto de todos los elementos HTML. Los elementos posicionados estáticamente se van colocando uno a continuación de otro, según el flujo HTML.

Valor “position: absolute”

Las capas que tienen una posición absoluta no forman parte del flujo natural de los otros elementos del documento HTML, sino que su posición está asignada independientemente de la posición de los otros elementos.

La posición de las capas con “position:absolute” se fija mediante unas coordenadas, que vienen dadas por los atributos top y left. El punto inicial de estas coordenadas es la esquina superior izquierda de la caja que contiene los elementos.

Nosotros hemos hecho un ejemplo en el que podrás ver una capa con “position:absolute” y su funcionamiento. No olvides observar el código fuente:

Valor “position: relative”

Anteriormente hemos visto como los elementos con posición absoluta no formaban parte del flujo HTML. Pues a diferencia de éstos, los elementos con posición relativa sí forman parte de este fluir.

Para elementos con un posicionamiento relativo, el origen de sus coordenadas no es la esquina superior izquierda del elemento contenedor, sino la posición que ocuparían naturalmente, de no estar condicionados o posicionados.

Nosotros hemos hecho un ejemplo en el que podrás ver una capa con “position:relative” y su funcionamiento. No olvides observar el código fuente: