Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 468

Visitas el mes pasado: 662

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

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




7. Posicionamiento (III)

7.3 Posición absoluta y relativa.

css

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.

Imagen posicion de cajas 1

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 resulució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.

Imagen posicion de cajas 2

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:

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:

Imagen posicion de cajas 3

Al aplicar estas propiedades observamos el siguiente comportamiento:


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



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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