<!DOCTYPE html>
<html lang="en-au">
<head>
<meta charset="utf-8">
<title>Percentage Visible test</title>
<style>
.navbar {
position: fixed;
background-color: green;
top: 0px;
left: 0px;
height: 25%;
width: 100%;
z-index: 10;
}
.content {
background-color: yellow;
height: 650px;
}
.display_none {
position: fixed;
background-color: blue;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 20;
display: none;
}
.visibility_hidden {
position: fixed;
background-color: red;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 20;
visibility: hidden;
}
.visibility_collapse {
position: fixed;
background-color: purple;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 20;
visibility: collapse;
}
</style>
</head>
<body>
<div class="navbar">Navigation Bar</div>
<div class="display_none">Should not see me</div>
<div class="visibility_hidden">Should not see me either</div>
<div class="visibility_collapse">Should have collapsed</div>
<div class="content">Content</div>
<form action="http://localhost">
<input type="text" id="username"/>
</form>
<div class="content">Content</div>
</body>
</html>