Página inicial  

trans_770 trans_160

Unidad 17. Estilos CSS Avanzado (XIII)


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.

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.

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.

Así deberíamos declarar la posición utilizando un par de propiedades top/bottom y left/right.

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.

 

El valor relative también nos permite mover el elemento. Este, en principio, ocupa su lugar en el flujo normal de la página y utilizaremos las propiedadeas top/bottom y left/right para desplazarlo tomando como referencia ese lugar y no los bordes de la página.

Por ejemplo:

p.especial {

position: relative;

top: 20px;

}

Esta regla hará que los párrafos marcados con la clase especial se desplacen 20 píxeles hacia abajo de su positión normal en el flujo de la página.

Piensa que lo que estamos diciendo en la definición de la regla es que va a haber una desfase de 20 píxeles desde la parte superior de donde se encontraba en un principio, por lo que el elemento se verá desplazado hacia abajo.

 

Finalmente encontramos el valor fixed. Este valor, desgraciadamente, no funciona en algunas versiones de Internet Explorer por lo que no te será de mucho uso aunque sea una muy buena regla de estilo.

Asignándole este valor a la propiedad position podemos hacer que un elemento se quede fijo en la ventana aunque se muevan las barras de desplazamiento. Un comportamiento muy útil para los menús o algunos gráficos que queramos que permanezcan siempre a la vista.

También acepta los pares top/bottom y left/right para definir la posición en la que se mostará fijo.

Por ejemplo:

#menu {

position: fixed;

top: 0px;

right: 0px;

}

Esta regla de estilo posicionaría un elemento con identidad menu en la esquina superior derecha de la ventana y aunque utilicemos el scroll (las barras de desplazamiento) permanecerá allí fijo.

Claro está, este valor no funciona en IE 6, aunque es posible que en futuras versiones puedan arreglar este problema.

 


  Ir a la página anterior Índice del curso  Ir a la siguiente página  

Pág. 17.13

Aviso legal: este curso es gratuito siempre que se visualice desde la página web de aulaClic. No está permitido descargar el curso y utilizarlo en academias o centros de enseñanza privados sin estar conectado a Internet.
© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Agosto - 2006.