Además de las propiedades que controlan el posicionamiento de los elementos, CSS define otras dos propiedades para controlar su visualización: visibility y overflow. Usando algunas de estas propiedades es posible ocultar y/o hacer invisibles las cajas de los elementos, por lo que son imprescindibles para realizar efectos avanzados y animaciones.
Habitualmente se usan junto con JavaScript para crear efectos dinámicos como mostrar y ocultar determinados textos o imágenes cuando el usuario pincha sobre ellos.
La propiedad visibility permite hacer invisible un elemento, lo que significa que el navegador crea la caja del elemento pero no la muestra. En este caso, el resto de elementos de la página no modifican su posición, ya que aunque la caja no se ve, sigue ocupando sitio.
visibility: visible | hidden | collapse | inherit;
Hacer elementos h2 visibles y ocultos
h2.a {visibility: visible;}
h2.b {visibility: hidden;}
La propiedad overflow especifica qué debería suceder si el contenido desborda el cuadro de un elemento. Esta propiedad especifica si se debe recortar contenido o agregar barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en un área específica.
overflow: visible | hidden | scroll | auto | initial | inherit;
Solo funciona para elementos de bloque con una altura especificada.
| Valor | Descripción |
|---|---|
| visible | El contenido no se corta y se muestra sobresaliendo la zona reservada para visualizar el elemento. Este es el comportamiento por defecto. |
| hidden | El contenido sobrante se oculta y sólo se visualiza la parte del contenido que cabe dentro de la zona reservada para el elemento. |
| scroll | Solamente se visualiza el contenido que cabe dentro de la zona reservada para el elemento, pero también se muestran barras de scroll que permiten visualizar el resto del contenido. |
| auto | El comportamiento depende del navegador, aunque normalmente es el mismo que la propiedad scroll. |
| initial | Establece esta propiedad en su valor predeterminado |
| inherit | Hereda del padre |
Mostrar diferentes valores de propiedad de desbordamiento
div.ex1 {overflow: scroll;}
div.ex2 {overflow: hidden;}
div.ex3 {overflow: auto;}
div.ex4 {overflow: visible;}