Introduction to CSS Positioning Properties Part 2 - The "visibility" property
(Page 4 of 6 )
This property is utilized for controlling whether an element is visually rendered on a document. By assigning the values "visible" or "hidden" to the element, it's possible to display it or hide it from view. However, if the element is hidden, it will preserve the space in the document where it's normally visualized. It's valid to mention that this property must not be interpreted as the "display" property, since this last one will remove completely the element from the document and the document space won't be preserved at all.
As stated above, the possible values for this property are the following:
visibility: visible;
Sets the selected element to be visible on the document.
visibility: hidden;
Sets the selected element to be hidden on the document. The original space occupied is preserved.
visibility: collapse;
Internet Explorer does not support this value.
visibility: inherit;
When the value "inherit" is assigned, it implies that if the parent element is hidden, then the child element will be hidden too. However, if the child's visibility is set to "visible," the parent element's visibility will remain hidden, so you can manipulate the child element in an independent way. Here's a simple example for this property:
<style type="text/css">
#element1 {
position: absolute;
width: 500px;
top: 200px;
left: 100px;
visibility: hidden;
}
</style>
The example shows an element that will be initially hidden from view. However, the space corresponding to the element in the document will be preserved.
Finally, we'll see our last CSS property for visual positioning, which wraps up this short guide for CSS2 positioning: the "overflow" property.
Next: The "overflow" property >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 9 
