Además de las propiedades que controlan el posicionamiento de los elementos, CSS define otras cuatro propiedades para controlar su visualización: display, visibility, overflow y z-index. 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.
Las propiedades display y visibility controlan la visualización de los elementos. Las dos propiedades permiten ocultar cualquier elemento de la página. 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 display permite ocultar completamente un elemento haciendo que desaparezca de la página. Como el elemento oculto no se muestra, el resto de elementos de la página se mueven para ocupar su lugar. Posibles valores: inline | block | none | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit.
display: list-item;
Uso de algunos valores de visualización diferentes
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
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. Posibles valores: visible | hidden | collapse | inherit.
visibility: collapse;
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;}
Además de posicionar una caja de forma horizontal y vertical, CSS permite controlar la posición tridimensional de las cajas posicionadas. De esta forma, es posible indicar las cajas que se muestran delante o detrás de otras cajas cuando se producen solapamientos.
z-index: auto|numero|initial|inherit;
La posición tridimensional de un elemento se establece sobre un tercer eje llamado Z y se controla mediante la propiedad z-index. Utilizando esta propiedad es posible crear páginas complejas con varios niveles o capas.
| Valor | Descripción |
|---|---|
| auto | |
| numero | px, cm |
| initial | Inicial |
| inherit | herencia |