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

.

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

 

7. Posicionamiento (II)

7.2 Propiedades de posición

Posicionamiento de cajas

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.

Control de la posición de cajas

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.

tipos de posicionamiento

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:

• Posicionamiento relativo: El punto de referencia es la esquina superior izquierda de su elemento contenedor
• Posicionamiento absoluto: El punto de referencia para medir el desplazamiento está en la ventana del navegador.

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:

• static: posicionamiento normal o estático Es el valor por defecto. muestra los elementos tal y como se ven si no se aplica la propiedad, e ignora los valores de las propiedades top, right, bottom y left para desplazar el elemento.
• relative: Posicionamiento relativo Es el posicionamiento relativo según se ha explicado anteriormente. Las propiedades top, right, bottom y left controlan el desplazamiento de la caja.
• absolute: Posicionamiento absoluto Es el posicionamiento absoluto tal y como se ha explicado anteriormente. Al igual que el relativo se controla con las propiedades top, right, bottom y left.
• fixed: Posicionamiento fijo Es como el posicionamiento absoluto, pero aquí el punto de anclaje es la esquina superior derecha de la ventana del navegador. la diferencia es que el elemento permanece fijo en la pantalla mientras que el resto de la página puede desplazarse mediante las barras de desplazamiento de la ventana (siempre que la página sea más grande que la ventana del navegador).

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.

.

desplazamiento de elementos

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

Posición absoluta y relativa

---

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