visibility: visible undoes visibility: hidden

If you set an element to display: none the browser ignores all of its children, if a child sets itself to display: block it will remain hidden. This isn't true of visibility.


Serious. {
  visibility: hidden;
} .the-button {
  visibility: visible;

So says the spec:

hidden: The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

CSS 2.1

I've found this useful when testing paint-related issues, as you can isolate a particular element without disrupting layout.

Further reading

comments powered by Disqus

Jake Archibald

Hello, I’m Jake and that is my face. I’m a developer advocate for Google Chrome.



Feel free to throw me an email, unless you're a recruiter, in which case destroy every email-capable device you own to prevent this possibility.