CSS Property visibility
visibility specifies whether the element is rendered.
Summary
| Item | Value |
|---|---|
| Initial value | inherit |
| Inherited | No. |
| Version | CSS2 |
| JavaScript syntax | object.style.visibility="hidden" |
| Applies to | All elements. |
CSS Syntax
visibility: collapse | hidden | inherit | visible
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| visible | Default. Show the element |
| hidden | Hide the element but keep the space |
| collapse | Only for table elements. collapse removes a row or column. |
| inherit | Inherit the visibility property from its parent |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
visibility |
Yes | Yes | Yes | Yes | Yes |
Example
An example showing how to use visibility CSS property.
<!-- w ww . ja v a 2 s . c om-->
<!DOCTYPE HTML>
<html>
<head>
<style>
.container{
position: relative;
width: 800px;
height: 800px;
background: pink;
}
* .box {
float: right;
overflow: auto;
visibility: visible;
width: auto;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
* .small {
visibility:hidden;
position: absolute;
padding-left: 10px;
background: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="small">this is a test.
<BR/>this is a test. this is a test.
this is a test. </div>
<div class="box">this is a test</div>
</div>
</body>
</html>