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: 38
Visitas el mes pasado: 153
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
Mediante el posicionamiento de cajas podemos elegir en qué lugar de la página aparecerá un cierto elemento. Esto lo hacemos mediante una serie de propiedades CSS que veremos a continuación.
Así decimos que un elemento está "posicionado" cuando se le ha indicado el lugar de la página en el que debe aparecer.
Los elementos no posicionados seguirán su flujo normal, es decir si son elementos de bloque se colocarán uno debajo de otro, y, de no indicar otra cosa, en el lado derecho; y los elementos en línea uno a continuación del otro.
Para controlar la posición, no sólo de una caja o etiqueta div
, sino de cualquier
elemento de la página utilizaremos en primer lugar la propiedad position
que indicará el tipo de posicionamiento del elemento.
Una vez indicado el tipo de posicionamiento, aplicaremos las propiedades
top
(arriba), bottom
(abajo), left
(izquierda),
right
(derecha), para desplazar el elemento hasta una nueva posición.
los valores de estas propiedades serán la distancia (en medidas) que debe desplazarse el elemento.
Con esto podremos controlar los elementos div
de la página de modo que
cada uno de ellos ocupe la posición deseada. Por supuesto antes tenemos que haberles dado
el tamaño apropiado para poder visualizarse correctamente mediante las propiedades
width
y height
, tal como hemos visto en la página anterior.
Podemos posicionar los elementos de varias maneras dependiendo del punto de referencia que tomemos para desplazar el elemento, también llamado punto de anclaje . Así tenemos el posicionamiento absoluto y el relativo:
La propiedad position
admite además otros tipos de desplazamiento, veamos la definición
de esta propiedad y después explicaremos los valores que admite:
Position | Posicionamiento |
---|---|
Valores | static | relative | absolute | fixed | inherit |
Descripción | Selecciona el posicionamiento con el que se mostrará el elemento |
Valor inicial | static |
se aplica a | Todos los elementos |
Veamos el significado de cada uno de los posibles valores de esta propiedad:
top, right, bottom
y left
para desplazar
el elemento.top, right, bottom
y left
controlan el desplazamiento de la caja.top, right, bottom
y left
.Además de estos tipos de posicionamiento está también el posicionamiento flotante, que se controla mediante otras propiedades, y que veremos más adelante.
.Como ya se ha dicho el desplazamiento se controla mediante las propiedades
top, right, bottom
y left
.
veamos la definición de estas cuatro propiedades:
top bottom left right |
Desplazamiento superior Desplazamiento inferior Desplazamiento izquierdo Desplazamiento derecho |
---|---|
Valores | <medida> | <porcentaje> | auto | inherit |
Descripción | Indican el desplazamiento horizontal y vertical del elemento respecto de su posición original |
Valor inicial | auto |
se aplica a | Todos los elementos posicionados |
Los elementos posicionados se comportan de diferente forma al aplicar estas propiedades
según el posicionamiento sea absoluto (valores absolute
y fixed
) o relativo
(valor relative
).
En la siguiente página veremos de una forma más concreta la diferencia entre el posicionamiento absoluto y relativo
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