CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 106
Visitas el mes pasado: 273
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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:
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.
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.
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