[英]website navigation bar hiding behind behind <main>
我正在建立一个网站,并尝试实现一个固定的导航栏。
HEAD HTML:
<header id="header" style="background: url(images/bg.png);background-position:center bottom; width: 100%; background-repeat: no-repeat; height:550px;-webkit-background-size: cover; -moz-background-size: cover;
-o-background-size: cover;background-size: cover;">
<div class="nav-menu">
<div id="nav-menu-container">
<ul>
<li class="menu-active">home</li>
<li><a href="blog.html">blog</a></li>
<li><a href="books.html">books</a></li>
</ul>
</div>
</div>
</header>
如您所见,标题具有背景图像,并且在滚动时,随着图像缓慢向上滚动,导航可以完美地固定在屏幕顶部。
但是,当我滚动到足以显示内容的开头时,导航栏就会消失。
(在标题关闭后以及导航消失后开始的代码片段)
<main>
<section id="intro">
<div id="introleft">
<h1>left</h1>
</div>
<div id="introright">
<h1>right</h1>
</div>
</section>
CSS:
.nav-menu {
width: 100%;
height: 0 auto;
margin: 0 auto;
padding:auto;
background-color: black;
position: fixed;
top: 0;
}
.nav-menu ul {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
overflow: hidden;
text-align: center;
}
.nav-menu li {
float: left;
margin:0;
padding:0;
padding: 15px 10px;
vertical-align:middle;
display:inline-block;
color: white;
text-decoration: none;
text-align: center;
}
.nav-menu li a {
color: white;
text-decoration: none;
font-weight: 600;
}
.nav-menu li a:hover {
color: grey;
}
.menu-active {
vertical-align:middle;
display:inline-block;
color: white;
text-decoration: none;
text-align: center;
font-weight: 600;
}
您可以尝试在css中增加导航栏的z索引 。
.nav-menu {
z-index:1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.