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: 205

Visitas el mes pasado: 316

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

7.4 Posición de cajas.

css

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:

Imagen posicion de cajas 4

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.



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