Unidad 17. Estilos CSS Avanzados (XXII)

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

Por ejemplo:

p.especial {

    position: relative;

    top: 20px;

    left: 20px;

}

Esta regla hará que los párrafos marcados con la clase especial se desplacen 20 píxeles hacia abajo y hacia la derecha de su posició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, y lo mismo con la parte izquierda, por lo que el elemento se verá desplazado en diagonal.

 

Finalmente encontramos el valor fixed. 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. Hemos de tener en cuenta que al desplazar la página puede que tapen otros elementos.

También acepta los pares top/bottom y left/right para definir la posición en la que se mostrará 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.

Este valor no funciona en IE 6, aunque sí en las siguientes versiones.

Pág. 17.22

Atrás  Inicio  Adelante





Página inicial  Cursos Informática Gratuitos

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


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