如何解决如果我在下面添加图片,导航栏就会消失
我页面上的一切都很顺利,我已经准备好了导航栏(也适用于我的手机)。 然后我在导航栏下放了一张照片,导航栏不见了..
我想要固定条形,使其保持可见,但当我这样做时它不见了。
图片应该保持相对,否则如果你调整到手机,这将不再正确。
有人能解决问题吗?
图片 css
.header{
max-width: 100%;
margin-left: 0;
margin-top: 0;
position: relative;
letter-spacing: 4px;
margin-top: 70px;
Box-sizing: inherit;
}
.header-image{
max-width: 100%;
height: auto;
border-style: none;
background-size: cover;
background-position: center center;
display: block;
position: relative;
Box-sizing: inherit;
}
.header-image-tekst{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
Box-sizing: inherit;
display: block;
text-align: center!important;
margin-top: 16px!important;
}
.header-image-tekst h1{
color: white;
font-size: 38px!important;
margin: 10% 0;
}
.header-image-tekst h1 .border{
padding: 8px 16px!important;
background-color: black;
opacity: 0.75;
}
导航栏 CSS
.container{
margin: 0 auto;
width: 100%;
position: fixed;
}
.nav{
border-bottom: 1px solid #EAEAE8;
text-align: right;
height: 70px;
line-height: 70px;
position: fixed;
}
.menu{
margin: 0 30px 0 0;
}
.menu a{
clear: right;
text-decoration: none;
color: #000;
margin: 0 10px;
line-height: 70px;
padding: 20px;
border-radius: 40px;
}
.menu a:hover{
background-color: #03999e3b;
}
label{
margin: 0 40px 0 0;
float: right;
margin: 0 10px;
line-height: 70px;
font-size: 26px;
display: none;
width: 26px;
float: right;
}
#toggle{
display: none;
}
@media only screen and (max-width: 700px){
label{
display: block;
cursor: pointer;
position: fixed;
}
.menu{
text-align: center;
width: 100%;
display: none;
}
.menu a{
display: block;
border-bottom: 1px solid #03989E;
margin: 0;
}
#toggle:checked + .menu {
display: block;
position: fixed;
}
}
.active{
background-image: linear-gradient(315deg,#ffffff 0%,#03989E 74%);
}
解决方法
据我所知,该图像可能与导航栏重叠。使用导航栏上的 z-index 使其显示在图像顶部。如果您不希望它们重叠,那么您必须调整一些布局 CSS,但这应该可行。我通常会将导航的 z-index 设置为 10,这样它就会始终位于我设置了 z-index 的其他元素的前面。
这是一篇参考文章:https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。