Unidad 17. Estilos CSS Avanzados (XXIII)



17.18. 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.

Esto tiene sentido en elementos posicionados, que pueden solapar otros elementos.

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). Recuerda que esta propiedad la empleábamos con las capas.

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, que ya habíamos comentado.

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 mostrarlo 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. Las barras siempre serán visibles.

Finalmente, con el valor auto aparecerán las barras de desplazamiento cuando sean necesarias.

 

Veamos unos ejemplos:

visible. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
hidden. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. Éste sí cabe.
scroll. Éste sí cabe.

 

En este ejemplo hemos introducido 5 etiquetas div que contienen un texto que a veces no cabe.

El bloque marcado con overflow: visible; muestra el texto saliendo de él (el texto excedente está fuera del flujo de la página). Al contrario que el que está definido como hidden que esconde el resto del texto.

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.

 

Para practicar realiza el Ejercicio Paso a Paso de Controles de Posición y visibilidad.

• Ejercicio propuesto de la Unidad 17 • Prueba evaluativa de la Unidad 17
Marzo-2012
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.