Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

7. Posicionamiento (III)

7.3 Posición absoluta y relativa.

Desplazamiento

Como vimos en la página anterior el desplazamiento de las cajas se controla mediante las propiedades top, bottom, left, right; después de definir la propiedad position.

Recordemos que la propiedad position puede tener uno de estos cuatro valores: static, relative, absolute, fixed. El comportamiento de las propiedades de desplazamiento (top, bottom, left, right) será distinto dependiendo del valor que tenga la propiedad position. A continuación veremos cómo se comportan cada uno de estos valores:

Para ello vamos a ver una página de ejemplo, en la que tenemos cuatro cajas del mismo tamaño, a las cuales les iremos aplicando los distintos valores de la propiedad position y luego las desplazaremos. Al pulsar sobre el enlace la página se abrirá en una ventana o pestaña aparte para que puedas seguir la explicación desde esta misma página.

paso 1

Ejemplo 1: cuatro cajas iguales

partimos de este ejemplo, en el que dentro de una caja contenedor más grande hay cuatro cajas a las que de momento en CSS sólo hemos definido su tamaño y su color de fondo.

El código HTML es el mismo durante todo el proceso, y no cambia a lo largo de las modificaciones que hagamos en la página. este es el siguiente:

<div id="principal">

<div id="est"><p>posición estática</p></div>
<div id="rel"><p>posición relativa</p></div>
<div id="abs"><p>posición absoluta</p></div>
<div id="fix"><p>posición fija</p></div>

</div>

Y el código CSS aplicado hasta ahora es el siguiente:

#principal { width: 800px; height: 800px; background-color: silver; margin: auto;}
#est { width: 100px; height: 100px; background-color: grey; }
#abs { width: 100px; height: 100px; background-color: yellow; }
#rel { width: 100px; height: 100px; background-color: lime; }
#fix { width: 100px; height: 100px; background-color: aqua; }

La caja "principal" contiene dentro a otras cuatro cajas, lo de poner distintos colores de fondo en las cajas es para poder distinguir unas de otras y ver cual es su posición y tamaño. Al no tener definida la propiedad position se comportan como elementos de bloque, es decir cada una de ellas ocupa toda la fila en la que está; por eso se muestran una debajo de otra, en el mismo orden en que aparecen en el lenguaje HTML.

paso 2

Aquí vamos a aplicar a las cajas la propiedad position con el valor que indica cada caja, y además desplazaremos las cajas con las propiedades left y top la página quedará así:

Ejemplo 2: desplazamiento "left" - "top"

Esta es la imagen de la página y el desplazamiento de las cajas:

NOTA: La página se verá exactamente igual que esta imagen si usamos una resolución de pantalla de 1024 x 768 px. De no ser así puede tener ligeras variaciones en las posiciones de los elementos, ya que las medidas están tomadas en píxeles.

La posición de las cajas ha variado. Veamos primero el código CSS añadido y después pasaremos a analizar el comportamiento de las cajas según el código aplicado. El código CSS ahora es el siguiente (en verde el código añadido).

#principal { width: 800px; height: 800px; background-color: silver; margin: auto}
#est { width: 100px; height: 100px; background-color: grey; 
       position: static ; left: 150px; top: 150px;}
#rel { width: 100px; height: 100px; background-color: lime; 
       position: relative ; left: 150px; top: 150px; }			 
#abs { width: 100px; height: 100px; background-color: yellow; 
       position: absolute ; left: 150px; top: 150px; }
#fix { width: 100px; height: 100px; background-color: aqua; 
       position: fixed ; left: 250px; top:150px;}

Al añadir este código hemos dado a cada caja un valor diferente para la propiedad position, y la hemos desplazado 150px tanto con la propiedad left como con top (salvo la caja fija, que la hemos desplazado 250px con left para que no ocupe el mismo lugar que la caja absoluta).

Como puede observarse la propiedad left (izquierda) desplaza la caja a la derecha, y la propiedad top (arriba) desplaza la caja hacia abajo, esto es porque lo que se indica es el espacio hacia la izquierda o hacia arriba que dejaremos entre la caja y su punto de referencia.

El comportamiento y posición de la cajas es diferente según se haya aplicado un valor u otro a la propiedad position. La forma de comportarse es la siguiente:

• static: Ignora por completo las propiedades de desplazamiento. La caja queda siempre en su lugar original
• relative: La caja se desplaza tomando como punto de referencia el lugar donde debería estar de no tener ese valor. En el ejemplo la caja es desplazada 150px hacia abajo y 150px hacia la derecha desde donde la hemos visto en el paso 1.
• absolute: Los puntos de referencia para posicionarse es la propia ventana del navegador, por lo tanto en el ejemplo ésta está desplazada 150px desde la izquierda (left) de la ventana, y 150px desde la parte superior (top) de la ventana.
• fixed: Se comporta igual que con el valor absolute pero aquí al mover las barras de desplazamiento de la ventana, (siempre que la página ocupe más espacio que la ventana), la caja se queda inmóvil, por lo que no se moverá con el resto de la ventana. En el ejemplo, si desplazamos la ventana con la barra de desplazamiento lateral (derecha) vemos que mientras el resto de la página se desplaza, la caja fija queda en el mismo sitio en la pantalla.

paso 3

Hemos aplicado la propiedad position a las distintas cajas con un desplazamiento mediante las propiedades left y top. Veamos ahora que pasará si a ls mismas cajas les aplicamos las propiedades right y bottom para desplazarse. el resultado es el siguiente:

Ejemplo 3: desplazamiento "right" - "bottom"

Ahora el código CSS aplicado es el siguiente:(en verde el código CSS cambiado al cambiar las propiedades left, top por las propiedades right, bottom).

#principal { width: 800px; height: 800px; background-color: silver; margin: auto}
#est { width: 100px; height: 100px; background-color: grey; 
       position: static ; right: 50px; bottom: 50px;}
#abs { width: 100px; height: 100px; background-color: yellow; 
       position: absolute ; right: 50px; bottom: 50px; }
#rel { width: 100px; height: 100px; background-color: lime; 
       position: relative ; right: 50px; bottom: 50px; }
#fix { width: 100px; height: 100px; background-color: aqua; 
       position: fixed ; right:150px; bottom: 50px;}

Y la imagen de la página con el desplazamiento de las cajas es la siguiente:

Al aplicar estas propiedades observamos el siguiente comportamiento:

• La caja estática sigue sin moverse de su sitio, como era de esperar.
• la caja relativa se ha desplazado hacia arriba y hacia la izquierda. Su punto de referencia sigue siendo el mismo que en el paso 2. Al cambiar las propiedades de desplazamiento en sus contrarias, se desplaza en sentido contrario que en el paso anterior, aunque esto suponga salirse fuera de su elemento contenedor.
• Las cajas absoluta y fija toman como referencia el borde derecho (right) e inferior (bottom) de la ventana del navegador, y a partir de ahí se desplazan en sentido contrario el valor indicado.

Diferencias entre posición absoluta y relativa

posición relativa

En la posición relativa, el desplazamiento se realiza a partir de la posición original de la caja, con lo que a partir de ahí la caja se mueve la medida indicada con las propiedades left, top, right, bottom. Estas propiedades también admiten medidas negativas, en este caso la medida negativa desplaza la caja en sentido contrario al positivo, con lo que las propiedades left: npx y right: -npx dan identico resultado, lo mismo ocurre con las propiedades top: npx y bottom: -npx

Posición absoluta

En la posición absoluta la posición de partida es siempre desde el borde de la ventana del navegador. Sin embargo esta posición es distinta según la propiedad de desplazamiento utilizada. Las propiedades left, top, right, bottom indican el borde desde el cual se mide el desplazamiento, el cual si es positivo será siempre hacia el interior de la ventana y en sentido contrario.

así por ejemplo la propiedad top: 100px indicará que la caja se situará 100px por debajo del borde superior, y la propiedad left: 200px indica que la caja se situará 200 px a la derecha del borde izquierdo de la pantalla. Los valores negativos desplazan la caja en sentido contrario, con lo cual ésta queda fuera de la pantalla, lo cual hace que sólo sea visible si la página es mas grande que la ventana, y utilizando las barras de desplazamiento.

En la siguiente página veremos otros aspectos para el control de la posición de las cajas.

Posición de cajas

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com