正文超过固定导航栏的顶部 [英] Body text goes over the top of fixed nav bar
本文介绍了正文超过固定导航栏的顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个固定的导航栏,滚动时会随之出现.
但是在滚动标签内的文本/图像时,它似乎位于导航栏的前面,而不是后面.
这是为什么?我该如何解决?
nav {
background-color: #262626;
height: 60px;
width: 100%;
position: fixed;
top: 0;
bottom: 0;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
}
nav a {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 60px;
text-transform: uppercase;
margin: 7px;
}
nav a:link {
color: #C8C8C8;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
nav a:visited {
color: #C8C8C8;
}
nav a:hover {
color: #199ABA;
}
#menu {
margin-right: 375px;
margin-left: 375px;
text-align: right;
margin-top: 0px;
margin-bottom: 0px;
}
#headertop {
margin: 0px;
width: 100%;
height: 650px;
font-family: 'Open Sans', sans-serif;
}
#headertop h1 {
position: absolute;
margin-left: 375px;
margin-right: 375px;
margin-top: 178px;
line-height: 45px;
font-size: 50px;
color: #33CCFF;
width: 550px;
height: 100%;
}
<nav>
<div id="menu">
<strong><a href="index.html" style="text-decoration:none">Home</a></strong>
</div>
</nav>
<div id="headertop">
<h1>THANKS</h1>
</div>
解决方案
这通常是由您的z-index引起的,请确保您输入:
CSS
z-index: 500 // or whatever number that is a positive real number.
是的,我是对的,请参见此 演示 .>
I have a fixed nav bar, that follows when scrolling.
But upon scrolling over text/images within tags it seems to go in front of the navbar, rather then behind.
Why is this? How can I fix it?
nav {
background-color: #262626;
height: 60px;
width: 100%;
position: fixed;
top: 0;
bottom: 0;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
}
nav a {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 60px;
text-transform: uppercase;
margin: 7px;
}
nav a:link {
color: #C8C8C8;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
nav a:visited {
color: #C8C8C8;
}
nav a:hover {
color: #199ABA;
}
#menu {
margin-right: 375px;
margin-left: 375px;
text-align: right;
margin-top: 0px;
margin-bottom: 0px;
}
#headertop {
margin: 0px;
width: 100%;
height: 650px;
font-family: 'Open Sans', sans-serif;
}
#headertop h1 {
position: absolute;
margin-left: 375px;
margin-right: 375px;
margin-top: 178px;
line-height: 45px;
font-size: 50px;
color: #33CCFF;
width: 550px;
height: 100%;
}
<nav>
<div id="menu">
<strong><a href="index.html" style="text-decoration:none">Home</a></strong>
</div>
</nav>
<div id="headertop">
<h1>THANKS</h1>
</div>
解决方案
This is usually caused by your z-index, make sure you put:
CSS
z-index: 500 // or whatever number that is a positive real number.
Yep, I was right, see this DEMO.
这篇关于正文超过固定导航栏的顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文