Unidad 17. Estilos CSS Avanzados (XXI)



17.17. Controles de posición

En este apartado veremos cómo posicionar el contenido de la página web utilizando únicamente estilos CSS.

 

Existen unas propiedades CSS que combinadas con las siguientes nos ayudarán a mover el contenido de la página.

Estas son top, left, bottom y right.

Con estas propiedades podremos establecer la distancia a los bordes de la ventana del navegador, o del elemento que lo contenga.

Recordemos que top equivale a la parte superior.

Left al lado izquierdo.

Bottom al borde inferior.

Y finalmente right al derecho.

Normalmente daremos valores a estas propiedades utilizando píxeles o porcentajes.

 

Veamos ahora cómo las utilizaremos. Para ello deberemos declarar también la propiedad position (posicionamiento).

Esta es sin duda la más compleja de este apartado así que la veremos con detenimiento.

Esta propiedad puede aceptar 4 valores: static, absolute, relative y fixed.

Vayamos uno a uno.

 

El valor static es el valor por defecto de un elemento, ocupa su lugar en el flujo de la página y no puede ser modificado utilizando las propiedades top/bottom y left/right.

p {
   position: static;
}

 

Con el valor absolute puedes colocar un elemento en cualquier parte de la ventana con sólo darle las coordenadas (las CapasPA emplean este posicionamiento).

Así deberíamos declarar la posición utilizando un par de propiedades top/bottom y left/right. Lo habitual es indicar también el alto y ancho, aunque si no lo hacemos estos valores se ajustarán al contenido.

Un ejemplo podría ser este:

#capa_flotante {
   position: absolute;
   top: 100px;
   left: 300px;
   width: 30px;
   height: 125px;
}

Esta declaración de estilos es muy habitual en las capas. Se posiciona absolutamente el objeto y luego se le da un ancho y un alto.

top: 0;
left: 0;
bottom: 0;
left: 0;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
top: 50%;
right: 0;
top: 70px;
left: 100px;
top: 25%;
right: 25%;
Pág. 17.21

Atrás  Inicio  Adelante







Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.