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: 315
Visitas el mes pasado: 708
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
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.
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.
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 originalrelative:
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.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:
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
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.
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