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 (IV)

7.4 Posición de cajas.

Tamaño y Posición

Con lo visto en las páginas anteriores podemos ya controlar el tamaño de una caja o div mediante las propiedades width y height

Podemos despues indicar su posición en la pantalla, para ello elegiremos primero uno de los tipos de posicionamiento mediante la propiedad position para posteriormente indicar mediante las propiedades de desplazamiento left, top, right, bottom el lugar que ocupará en la pantalla.

Siguiendo con lo visto hasta ahora hay algunos aspectos sobre el psoicionamiento absoluto y relativo que se deben tratar:

Referencia de la posición absoluta

Como se dijo en la página anterior, el valor position: absolute toma como referencia la ventana del navegador. Esto sin embargo puede variar, basta con dar a su elemento contenedor la propiedad y valor position:relative o position:absolute para que se tome como referencia al elemento contenedor en lugar de la ventana del navegador. Es decir si dentro de una etiqueta con posicionamiento absoluto o relativo, incluimos otra con posicionamiento absoluto, la referencia de esta última será el contenedor que engloba a la primera etiqueta, y no la ventana del navegador.

El valor position:fixed en este caso sigue tomando como referencia la ventana del navegador.

Veamos el ejemplo del apartado anterior modificado, en el cual se muestran las posiciones de las distintas cajas:

Ejemplo 4: Contenedor con posicionamiento relativo

La imagen del navegador con los desplazamientos es la siguiente:

Y el código CSS aplicado a esta página de ejemplo es el siguiente:

#principal { width: 800px; height: 800px; background-color: silver; 
             margin:auto; position: relative; }
#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; top: 50px; }
#rel { width: 100px; height: 100px; background-color: lime; 
       position: relative ; left: 50px; bottom: 50px; }
#fix { width: 100px; height: 100px; background-color: aqua; 
       position: fixed ; right:50px; bottom: 50px;}

De esta forma, si definimos un elemento contenedor con un tamaño fijo (medido en pixels), los elementos definidos mediante posicionamiento absoluto dentro del contenedor tendrán como referencia el contenedor, y no la página, por lo que dentro del contenedor estarán siempre en el mismo sitio, y no cambiarán aunque el usuario use otra resolución de pantalla.

Desplazamiento de cajas adyacentes

Al desplazar una caja respecto de su posición original, las cajas que estaban a su alrededor tienen un comportamiento diferente si el posicionamiento es absoluto o relativo. Veamos un ejemplo con tres imágenes al que luego modificaremos la posición de una de ellas tanto de forma absoluta como relativa. Se han elegido imágenes por ser elementos en línea y verse con más claridad el comportamiento de éstos elementos, pero las cajas o etiquetas div se comportan de la misma manera, con la única salvedad de que son elementos de bloque.

En este enlace se muestran las tres imágenes en su posición original.

Ejemplo 1: Posición original de las imágenes.

Ahora desplazaremos la segunda imagen mediante posicionamiento relativo:

para ello le aplicaremos el código CSS siguiente:

.desplazar { position: relative; top: 250px; left: 250px; }

Previamente tendremos que haber insertado en la segunda imagen el atributo class en el código HTML:

<img class="desplazar" src="quijote2.gif"/>

Una vez aplicado el código visualizamos la página la cual queda de la siguiente manera:

Ejemplo 2: imagen desplazada por posición relativa.

Observamos que la imagen se ha desplazado, y que el hueco que ocupaba queda libre y no es ocupado por la siguiente imagen, que se comporta como si la imagen todavía siguiera en su sitio original.

Veamos ahora qué pasa cuando la imagen se desplaza mediante el posicionamiento absoluto: el código CSS aplicado ahora a la imagen es el siguiente:

.desplazar { position: absolute; top: 250px; left: 250px; }

Visualizamos la página y nos queda de la siguiente manera:

Ejemplo 3: imagen desplazada por posición absoluta.

En este caso la imagen se desplaza, y el hueco dejado por ésta es ocupado por la imagen siguiente, de la misma forma que si la hubieramos suprimido.

Por tanto al posicionar un elemento el comportamiento de los elementos adyacentes es distinto según se posicione de forma absoluta o relativa. En el posicionamiento absoluto el elemento se ignora y las cajas se comportan como si este no estuviera en la página. En el posicionamiento relativo se trata como si el elemento no se hubiera movido, y las demás cajas respetan el espacio que debería ocupar de no haberse movido.

En la siguiente página veremos otro tipo de posicionamiento, el posicionamiento flotante.

Posicionamiento flotante.

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