Navbar fixed on the top of HTML page (CSS / HTML)
I'm trying to learn some of CSS3 and HTML5 but I'm a little confused with somethings. For now, I want create a page with a fixed navbar on the top of page, that scrolls with the page.
Actually the navbar is fixed on the top and scrolls with the page, but the content start at the top of the page, in other words, the content start BEHIND the navbar, I don't want this.
See wanted design bellow: 
Current design: 
Following is my 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 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/><br/>
<p>again</p>
</body>
So, what can I do to solve my problem? Please, try to answer using CSS, I really don't want learn JavaScript/jQuery at the moment.
Thanks!
Add margin-top to your content. The header is fixed - so it is not included within the flow of the document.
Also notice that you have opacity defined on your header - which causes you to slightly see the content when scrolling.
If this is not what you wanted - then remove it. (like so)
FIDDLE
#content{
margin-top: 100px;
z-index: 0;
position: absolute;
}
What you need to use is position: fixed;
/* Tell body leave a 40px gap at the top for the navigation when the page is scrolled to the top */
body { position: relative; padding-top: 40px; }
/* Tell the nav to stick to the top left */
nav { position: fixed; top: 0; left: 0; }
http://jsfiddle.net/ninty9notout/8J7UM/
wrap you content with a div and give it padding top 100px(height of header)
as per my structure
.bodyPan{
padding-top:100px;
}
working jsFiddle file
链接地址: http://www.djcxy.com/p/51760.html