Everything could be visible, yes, and static, also yes. But what of user interaction? How does the page respond so the user knows their interaction has been acknowledged? Answer: Through visual signals, such as revealing a previously hidden element.
To gain a complete understanding of
visibility: hidden; we need to understand normal flow. When an object has a visibility property, its position and dimensions in normal flow are preserved. Only the hidden content is not visible. The space it would take up is still there on the page.
It has to do with element hop, the action of elements below a removed element hopping up to fill the void. Rapid visual side effects can be annoying, disturbing and even cause seizures. The visibility property was devised to prevent this sort of thing.
A terrible example, yet still appropriate in a sense would be a blinking object. We could have a fragment of text that blinks given a specified time interval. When it is not visible the space it occupies will still be there.
There is more to this that just visual, though. The difference between
display: none and
visibility: hidden goes much deeper, right to the heart of the content.
We could have a paragraph or entire essay taken out of the normal flow using
display: none, and it would be virtually invisible. But if we leave it in normal flow and give it a
visibility value of
hidden, it will only be invisible to sighted users. Screen readers will still be able to read it, as will search engines when they are crawling the pages on one’s site. Something to keep in mind.
The downside of the visibility property is that it protects its screen real estate. For this reason we do have to be mindful of how we implement it.