导航栏固定在 HTML 页面的顶部 (CSS / HTML)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18466373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Navbar fixed on the top of HTML page (CSS / HTML)
提问by Paladini
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.
我正在尝试学习一些 CSS3 和 HTML5，但我对某些东西有些困惑。现在，我想在页面顶部创建一个带有固定导航栏的页面，该页面随页面滚动。
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:
以下是我的 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:
还有我的 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.
那么，我能做些什么来解决我的问题？请尝试使用 CSS 来回答，我现在真的不想学习 JavaScript/jQuery。
Thanks!
谢谢！
回答by Danield
Add margin-top to your content. The header is fixed - so it is not included within the flow of the document.
将 margin-top 添加到您的内容中。标题是固定的 - 因此它不包含在文档流中。
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)
如果这不是您想要的 - 然后将其删除。（像这样）
#content{
margin-top: 100px;
z-index: 0;
position: absolute;
}
回答by ninty9notout
What you need to use is position: fixed;
你需要使用的是 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; }
回答by Roy Sonasish
wrap you content with a div and give it padding top 100px(height of header)
用 div 包裹你的内容并给它填充顶部 100px（标题的高度）
as per my structure
按照我的结构
.bodyPan{
padding-top:100px;
}
回答by Eduardo Wada
Elements with "fixed" or "absolute" position don't occupy space in the page, so a possible workaround for you is to add a margin or padding to your content:
具有“固定”或“绝对”位置的元素不占用页面空间，因此可能的解决方法是为内容添加边距或填充：
<article id='content'>
<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/>
<br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/>
<p>again</p>
<article>
#content{
margin-top: 100px;
}
回答by Vikas Singhal
Give margin to your content. The margin value should be the height of you header (sticky header) + 20px.
为您的内容留出余量。边距值应为标题（粘性标题）的高度 + 20px。
