Currently, I am in the process of learning CSS3 and HTML5 but I'm facing some confusion. My goal right now is to create a webpage with a fixed navigation bar at the top that scrolls along with the page.
Although the navbar is fixed at the top and does scroll with the page, the issue arises when the content starts at the top of the page, essentially starting behind the navbar, which is something I want to avoid.
Desired design:
Current design:
Here is my current CSS:
body{
left: 0;
top: 0;
margin: 0px;
padding: 0px;
}
header.topbar{
background-color: #f8f6f6;
position: fixed;
width: 100%;
height: 100px;
opacity: 0.7;
z-index: 1;
top: 0;
left: 0;
}
#content{
z-index: 0;
position: absolute;
}
And here is my HTML:
<!DOCTYPE HTML>
<html>
<head>
<title> Test </title>
<meta name="description" content="página de teste.">
<link rel="stylesheet" type="text/css" href="stylesheet/style.css"/>
</head>
<body>
<header class="topbar">
test
</header>
<p>another test</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<p>again</p>
</body>
I'm seeking suggestions on how to solve this problem using CSS only as I prefer not to delve into JavaScript/jQuery for now. Any input would be greatly appreciated!
Thank you!