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

Visitas el mes pasado: 126

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

7.2 Propiedades de posición

css

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:

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:

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







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