Navbar固定在HTML页面的顶部（CSS / HTML）
我试图学习一些CSS3和HTML5，但我有点困惑。 现在，我想要在页面顶部创建一个固定导航栏的页面，并与页面一起滚动。
实际上，导航栏固定在顶部并与页面一起滚动，但内容从页面顶部开始，换句话说，内容开始在导航栏的后面，我不想这样做。
看到想要的设计波纹管： 
当前设计： 
以下是我的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;
}
和我的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>
那么，我能做些什么来解决我的问题？ 请尝试使用CSS来回答，我现在不想学习JavaScript / jQuery。
谢谢！
将margin-top添加到您的内容。 标题是固定的 - 所以它不包含在文档的流程中。
另外请注意，您在标题上定义了不透明度 - 这会使您在滚动时略微看到内容。
如果这不是你想要的 - 然后删除它。 （像这样）
小提琴
#content{
margin-top: 100px;
z-index: 0;
position: absolute;
}
你需要使用的是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/
用div包装你的内容，并给它填充顶部100px（标题的高度）
根据我的结构
.bodyPan{
padding-top:100px;
}
工作jsFiddle文件
链接地址: http://www.djcxy.com/p/51759.html