Índice

Posicionamiento de las cajas

Un elemento puede posicionarse de cuatro formas distintas.

1. Posicionamiento estático

Es el posicionamiento normal del elemento según la forma habitual de proceder del navegador.

El posicionamiento estático se determina mediante el atributo:

position: static;

El diseñador no tiene el control. El elemento no puede posicionarse ni reposicionarse y su visibilidad no puede modificarse. Del mismo modo, no es posible utilizar JavaScript para cambiar la posición del elemento.

2. Posicionamiento relativo

Es el posicionamiento de un elemento respecto a su posición normal o estática.

Este elemento permanece en el flujo de los datos, aunque está, en cierta medida, descentrado respecto a su posición normal.

La posición se define mediante las coordenadas (x,y) donde:

  • x es la distancia respecto al borde izquierdo del elemento padre o de la ventana del navegador (eje horizontal). De este modo, left determina la distancia entre la parte izquierda del elemento y el borde izquierdo de la página y right la distancia entre la parte derecha del elemento y el borde derecho de la página.

  • y es la distancia respecto al borde superior del elemento padre o de la ventana del navegador (eje vertical). De este modo, top determina la distancia entre el borde superior del elemento y el borde superior de la página y bottom la distancia entre el borde inferior del elemento y el borde inferior de la página.

images/21RI01.png

El posicionamiento relativo se determina por:

position: relative;

left: ...