TIPS - CSS: Professional Techniques for Modern Layout - page 80

SUPPRESSING ELEMENT VISIBILITY
In a manner very similar to suppressing the display of an element, you can reduce its
visibility to zero by declaring it to be hidden .
.hide { visibility : hidden ;}
h is will make the element invisible, which probably sounds a lot like it having no display .
h ere's a crucial dif erence, though: An element that's set to visibility: hidden still
participates in the layout of the page, as evident in Figure 3-7.
82
Figure 3-7: Invisible element.
So besides taking up space, what good is an invisible element? A mouse user can't interact
with it, it may not be accessible by keyboard, and you certainly can't see it. So why bother?
Well, it's great for absolutely positioned elements, which are already not participating in the
page's layout. (h ey sit sort of above everything else and aren't taken into account when laying
out other elements.) So you can toggle their visibility between hidden and visible
without af ecting the page's layout. As a bonus, you can hide or show them without messing
with the element's display role, thus sidestepping the potential problems mentioned in the
preceding section.