Página inicial

Unidad 17. Estilos CSS Avanzado (XIV)


Controles de visibilidad

 

Por último en este apartado veremos unas cuantas propiedades que tienen que ver con la forma en la que se visualizan los elementos en pantalla.

 

La primera propiedad que veremos será z-index.

Esta propiedad decide el orden de profundidad de los elementos que se encuentran solapados.

En el apartado anterior vimos cómo mover los elementos en la pantalla. Imagina, ahora, que al mover dos capas una nos queda por encima de la otra.

¿Cómo podemos decidir cuál quedará por detrás? ¿Y al frente?

Utilizaremos esta propiedad para ello.

Z-index acepta números positivos o negativos, y establece que el elemento con un valor mayor se mostrará por delante del resto.

Veamos un ejemplo:

z-index: 0
z-index: 2
z-index: 1
z-index: 2




z-index: 0
z-index: 1

Para utilizar esta propiedad basta con declararla:

.rojo {

position: relative;

top: 100px;

left: 20px;

z-index: 0;

}

 

Otra propiedad muy valiosa a la hora de jugar con la visibilidad es visibility.

Puede tomar los valores visible y hidden (visible y escondida respectivamente).

Asigna el valor hidden a todos aquellos elementos que quieras que no aparezcan en la pantalla.

Muy útil para ocultar estadísticas o para crear animaciones complejas combinando esta propiedad con JavaScript.

#estadisticas {

visible: hidden;

}

 

Finalmente nos encontramos con otra propiedad llamada overflow.

Esta propiedad establece como ha de tratarse el contenido dentro de un elemento.

El overflow en realidad se hace cargo del desbordamiento de contenido. Por lo que sólo actúa en aquellos casos en los que el continente se queda demasiado pequeño para mostarlo todo.

Puede tomar los valores visible, hidden, scroll y auto.

El valor visible hace que se ignore el tamaño del continente para mostrar todo el contenido. Es el valor por omisión en la mayoría de los navegadores.

Utilizando hidden se oculta el contenido que no cabe y no muestra barras de desplazamiento. El tamaño del continente no se verá afectado.

Si le das el valor scroll se introducirán las barras de desplazamiento necesarias para que el contenido pueda visualizarse correctamente. El tamaño del continente no se verá afectado.

Finalmente, con el valor auto dejamos que sea el explorador del usuario el que decida qué hacer con el sobrante del contenido.

 

Veamos unos ejemplos:

visible

aulaclic
hidden

aulaclic
scroll

aulaclic
auto

aulaclic

En este ejemplo hemos introducido 4 etiquetas div que contienen una imagen más ancha que ellas.

El bloque marcado con overflow: visible; ignora su tamaño y muestra la imagen completa. Al contrario que el que está definido como hidden que esconde (o recorta) el resto de la imagen.

El valor scroll muestra las 2 barras de desplazamiento aunque la vertical no sea necesaria, y auto hace que el navegador introduzca únicamente la horizontal pues es la que es necesaria en este caso.

 

  Ejercicios del Tema 17.

  Prueba evaluativa del Tema 17.




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

Pág. 17.14

© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Agosto - 2006.