Tipos Posicionamiento

Static (estático o normal)

Es el modelo que por defecto utilizan los navegadores para mostra los elementos de la página. Los elementos se muestran en el mismo orden que se encuentra el código fuente de la página. Aqui los elementos en linea que están contenidos dentro de elementos de bloque y los elementos de bloque ocupan todo el ancho de la página y la altura necesaria para mostrar su contenido.

Block

En el caso de los párrafos se muestran debajo de otra y ocupa todo el ancho de la página y las distancias se controlarán mediante lso márgenes verticales. Si un elemento esta dentro de otro, el elemento padre se llama elemento contenedor y detrmina tanto la posición como el tamaño de todas us cajas anteriores. Si un elemetno no se encuentra dentro de un elemento contenedor, entoce su elemento contenedor es el elemento body de la página. Normalmente la anchura de los elementos de bloque está limitada a la anchura de us elemento contenedor, aunque en elgunos casos sus contenidos pueden debordar el espacio disponible.

Inline

Los elementos en linea forman los contextos de formato en linea. En este tipo de contexto, las cajas se muestran una tras otra de forma horizantal comenzando desde la posición más a la izquierda de su elemento contenedor. La distancia entre las cajas se controla mediante los márgenes laterales. Si la caja en linea ocupan más espacio del disponible en su propria linea, el resto de cajas se muestran en las líneas inferiores. Si las cojas en línea ocupan un espacio menor que su propia línea, se puede controlar la distribución de las cajas mediante la propriedad text-align para centrarlas, alinearlas a la derecha o justificarlas.

Relative

Permite desplazar una caja respecto a su posición original establecida mediante el posicionamiento normal. Tiene como propriedades: top, right, bottom y left. El desplazamiento de una caja no afectará al resto de cajas adyacentes, que se muestran en la misma posición que si la caja desplazada no se hubiera movido de us posición original.

El problema de posicionar elementos de forma relativa es que se pueden producir solapamientos con toros elementos de la página. Aqui la propriedad lefto despñaza la caja hacia su derecha, right hacia izquierda, top desplaza la cja de forma descendente y bottom de forma ascendente. Si se utilizan valores engativos ene estas propriedades, su efecto es justamente el inverso.

Absoute

Se emplea para establecer de forma precisa la posició en la que se muestra la caja de un elemento. La nueva posición de la caja se indica mediante la propriedades top, right, bottom y left. Cuando una caja se posiciona de forma absoluta, el resto de los elementos de la página la ignoran y ocupan el lugar original ocupado por la caja posicionada. Al igual que en el posicionamiento relativo, cuando se posiciona de forma absoluta una caja es probable que se produzcan soapamientos con otras cajas.