Navbar固定在HTML页面的顶部（CSS / HTML） [英] Navbar fixed on the top of HTML page (CSS / HTML)
问题描述
我试图学习一些CSS3和HTML5，但我有点困惑于某些事物。现在，我想要在页面顶部创建一个固定导航栏的页面，并与页面一起滚动。实际上，导航栏固定在顶部并与页面一起滚动，但内容从页面顶部开始，换句话说，内容开始在导航栏的后面。 ，我不想要这个。
查看想要的设计波纹管：
当前设计：
以下是我的CSS：
body {
left：0;
top：0;
margin：0px;
padding：0px;
}
header.topbar {
background-color：＃f8f6f6;
位置：固定;
宽度：100％;
height：100px;
不透明度：0.7;
z-index：1;
top：0;
剩下：0;
}
#content {
z-index：0;
位置：绝对;
}
和我的HTML：
<！DOCTYPE HTML>
< html>
< head>
< title>测试< / title>
< meta name =descriptioncontent =páginade teste。>
< link rel =stylesheettype =text / csshref =stylesheet / style.css/>
< / head>
< body>
< header class =topbar>
test
< / header>
< p>另一项测试< / p>< br />< br />< br /> BR /><峰; br /><峰; br /><峰; br /><峰; br /><峰; br /><峰; br />
< br />< br />< br />< br />< br / ><峰; br />
< br>< br />< br />< br />< br />< br />
< p>再次< / p>
< / body>
那么，我能做什么解决我的问题？请尝试使用CSS来回答，我真的不想学习JavaScript / jQuery。
谢谢！
将margin-top添加到您的内容。标题是固定的 - 所以它不包含在文档的流程中。
另外请注意，您的头文件中定义了不透明度 - 这会让您略微看到滚动内容。
如果这不是您想要的 - 然后将其删除。 （像这样）
< a href =http://jsfiddle.net/danield770/TTPc9/ =noreferrer> FIDDLE
#content {
margin-top：100px;
z-index：0;
位置：绝对;
}
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)
#content{
margin-top: 100px;
z-index: 0;
position: absolute;
}
这篇关于Navbar固定在HTML页面的顶部（CSS / HTML）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
