Navbar固定在HTML页面的顶部(CSS/HTML)
Pal*_*ini 3 html css html5 css3
我正在尝试学习一些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;
}
| 归档时间： |
|
| 查看次数： |
50978 次 |
| 最近记录： |