visibility
Description
visibility specifies whether the element is rendered.
| Item | Value |
|---|---|
| Initial value | inherit |
| Inherited | No. |
| Version | CSS2 |
| JavaScript syntax | object.style.visibility="hidden" |
| Applies to | All elements. |
Syntax and Property Values
visibility: collapse | hidden | inherit | visible
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 |
Example
<!--from w ww .ja v a2 s. c o m-->
<!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>
The code above generates the following result.
