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.