我已尝试过我在此处看到的解决方案:更改z-index
,absolute
定位等。当我尝试使用绝对位置时,它会缩小{{1}到600px。关于我做错了什么想法?
navbar

body, html {
height: 100%;
}
.jumbotron {
height: 100vh;
padding: 0;
margin: 0;
background-image: url('https://www.w3schools.com/css/trolltunga.jpg');
background-size: cover;
z-index: 0;
}
.topnav {
background-color: #3b4e6b;
overflow: hidden;
z-index: 1;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 20px 25px;
}
.topnav .icon {
/* Hide icon to expand menu */
display: none;
}
/* When screen is less than 600px wide, hide all links except the first one, and display the icon to expand the menu */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* When screen is less than 600px wide, display all links vertically when icon is clicked */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}

答案 0 :(得分:0)
task
仅在分配了z-index
属性时才有效,
所以在position
使用z-index: -1
和position:relative
(使用.jumbotron
)
top: negative value at your choice
body,
html {
height: 100%;
}
.jumbotron {
height: 100vh;
padding: 0;
margin: 0;
background-image: url('//lorempixel.com/600/600');
background-size: cover;
z-index: -1;
position: relative;
top: -64px /* value of topnav height */
}
.topnav {
background-color: rgba(0, 0, 0, 0.5); /* changed for demo purposes*/
overflow: hidden
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 20px 25px;
}
.topnav .icon {
/* Hide icon to expand menu */
display: none;
}