Propiedad visibility de CSS

La propiedad visibility de CSS podemos usarla para ocultar o mostrar elementos del diseño de una página web. Tenemos a nuestra disposición tres valores: visible, hidden y collapse. Dependiendo del valor que asignemos, el comportamiento que tendrá el elemento será diferente. Vamos a detenernos un momento a revisar cada uno.

Valor visibility: hidden

Si establecemos el valor de la propiedad en hidden, el elemento se ocultará pero seguirá ocupando el mismo espacio dentro de la maqueta. A efectos prácticos es como si el elemento en cuestión fuera transparente, es decir, no se mostrará al usuario pero estará aí interactuando con el resto de elemento del diseño.

.elemento {
    visibility: hidden;
}

Valor visibility: collapse

Cuando definimos el valor de visibility en collapse, el elemento se ocultará como el caso anterior pero no ocupará espacio en la página. Será como si se hubiera colapsado hasta ser invisible, pero seguirá estando

.elemento {
    visibility: collapse;
}

Valor visibility: visible

Si hemos establecido un elemento previamente con alguno de los valores anteriores podemos revertirlo a su estado original con visible. De este modo podemos volver a mostrar lo que habíamos ocultado previamente, como puede ser el caso de elementos que dependerán de la resolución de pantalla.

.elemento {
    visibility: visible;
}

Es importante tener en cuenta que la propiedad visibility solo afecta la visibilidad del elemento, pero no su interacción con otros elementos en la página. Por ejemplo, si tienes un botón dentro de un elemento ocultado con visibility: hidden, el botón todavía estará activo y se podrá hacer clic en él. Si quieres desactivar completamente un elemento, deberías usar la propiedad display en lugar de visibility.