HTML    •    CSS

Introducción a las CSS.
Formas de aplicar CSS I.
Formas de aplicar CSS II.
Pseudoclases.
Unidades de medida.
Estilos de fuentes.
Estilos de párrafos.
Estilos de fondo.
Estilos de bordes.
Margin y Padding.
Float y Clear.
Position, left y top.
Width y height.
Altura de las capas.
Visibility y display.
Overflow.
Scrollbar.
Inicio > Curso de CSS (hojas de estilo) > Position, left y top.

Position, left y top.

Estilo 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. Ver ejemplo de position:absolute

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. Ver ejemplo de position:relative

<< Float y Clear. Width y height. >>

Artículo escrito por Alberto Gómez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.  


© HazUnaWeb.com. Tutoriales y manuales de programación y diseño de páginas web. :: Contacto :: Aviso legal
Queda absolutamente prohibida la copia o reproducción total o parcial de los contenidos de este página.