所以我是初学者，所以请原谅我的代码，我理解它非常混乱，需要清理。我试图创建一个paralax类型的网站，使用两个＆＃34;幻灯片＆＃34;，只需使用2个元素并将它们设置为具有单独的固定背景。现在我的问题出现在我使用的bootstrap导航栏的形式。当导航栏折叠，我点击汉堡图标时，它可以工作，但是列表覆盖了我在第二张幻灯片上的内容，而不是将内容推到页面的下方，我已经搜索了很多，但我想我创建HTML的方式是问题。
HTML
<body>
<div id="slide1">
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="RJAhome2.html">
<img class="logo" src="https://lh3.googleusercontent.com/PwCMx8gHG4ubuI13n0hSh1o6Ks8oucZ_14mnDI-wb58wneRKDlQY6_Ujuf87g61dNDLo8YXMzpY34v7jLnI6A4BfnDb0WOxzhrKycp0g">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="RJAhome2.html"><strong>HOME </strong><span class="sr-only">(current)</span></a></li>
<li><a href="RJAabout.html"><strong>ABOUT US </strong></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><strong>THE ACADEMY </strong><span class="caret"></span></a>
<ul id="dropdown1" class="dropdown-menu">
<li><a href="RJAinstructors.html">THE INSTRUCTORS</a></li>
<li role="separator" class="divider"></li>
<li><a href="RJAbjj.html">BJJ</a></li>
<li><a href="RJAjj.html">KENPO JIU JITSU</a></li>
<li><a href="RJAboxing.html">BOXING/KICKBOXING</a></li>
<li><a href="RJAmma.html">MMA</a></li>
<li role="separator" class="divider"></li>
<li><a href="RJApricing.html">PRICING</a></li>
<li><a href="RJAphotos.html">PHOTOS & VIDEOS</a></li>
<li><a href="RJAtestimonials.html">TESTIMONIALS</a></li>
</ul>
</li>
<li><a href="RJAschedule.html"><strong>SCHEDULE </strong></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><strong>ROGER'S BJJ </strong><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="RJAachievements.html">ACHIEVEMENTS</a></li>
<li><a href="RJAhistory.html">HISTORY</a></li>
</ul>
</li>
<li><a href="RJAcontact.html"><strong>CONTACT US </strong></a></li>
</ul>
</div>
</div>
</nav>
<div class="headers">
<h4>GOSPORT & FAREHAM'S HOME OF CHAMPIONS</h4>
<h1><strong>ROGER'S BJJ ACADEMY</strong></h1>
<button id="infobutton" class="btn btn-lg">VIEW OUR SCHEDULE</button>
</div>
</div>
<div id="slide2">
<div class="contact">
<div>
<a href="RJAhome.html"><img class="logo2" src="https://lh3.googleusercontent.com/PwCMx8gHG4ubuI13n0hSh1o6Ks8oucZ_14mnDI-wb58wneRKDlQY6_Ujuf87g61dNDLo8YXMzpY34v7jLnI6A4BfnDb0WOxzhrKycp0g"></a>
</div>
ROGER'S BJJ ACADEMY <br>
UNIT D18 HERITAGE BUSINESS PARK <br>
HERITAGE WAY GOSPORT <br>
HAMPSHIRE PO12 4BG <br>
<a href="https://www.facebook.com/rogersbjj/"><i class="fab fa-facebook-square fa-2x"></i></a>
<a href="https://www.instagram.com/explore/locations/128542971053416/rogers-jiujitsu-academy-the-tigers-lair-gym/"><i class="fab fa-instagram fa-2x"></i></a>
<a href="#"><i class="fas fa-envelope fa-2x"></i></a>
</div>
</div>
CSS
body {
font-family: Rajdhani;
color: white;
width: 100%;
height: 100%;
}
.nav>li>a:focus, .nav>li>a:hover {
background-color: transparent !important;
color: #FFFFFF;
border-bottom: 3px solid #FFFFFF;
padding-bottom: 5px;
}
.dropdown-menu li, .dropdown-menu a {
padding:5px 0px 5px 0px;
margin:0px;
color: white;
background-color: white;
}
.logo {
width: 7em;
}
.navbar {
font-family: Rajdhani;
border: 0px white solid;
}
.navbar-toggle .icon-bar {
background-color: #fff;
margin-top: 5.5em;
}
li a {
color: white;
margin-top: 2.5em;
font-size: 1.5em;
}
.collapsed {
color: white;
}
#slide1 {
background: url(dojo.jpg) 50% 0 no-repeat fixed;
background-size: cover;
height:700px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#slide2 {
background-color: #fff;
color: #333333;
height: 235px;
margin: 0 auto;
overflow: hidden;
padding-top: 15px;
}
.headers {
color: white;
display: block;
margin-top: 14em;
margin-left: 1em;
font-family: Rajdhani;
font-weight: 1000px;
}
#infobutton {
display: block;
width: 10.5em;
background-color: transparent;
color: white;
border: 2px solid white;
margin-top: 1em;
}
.contact {
font-family: Rajdhani;
font-size: 1em;
text-align: center;
}
.logo2 {
width: 7em;
padding-bottom: 0.5em;
}
导航栏只是重叠第二张幻灯片上的任何内容。我怎么能让它推动其他元素呢？谢谢：D
答案 0 :(得分：0)
我试图重新创建您的代码，看看您要修复的是什么，所以如果这不是您想要的，我会道歉。
使用bootstrap'navbar-fixed-top'会添加一个z-index属性，该属性用于确定元素前面或后面的放置距离。标准引导程序'navbar-fixed-top'设置为：
.navbar-fixed-top {
top: 0;
z-index: 1030;
}
它将放在你的其他元素之上，我假设它没有设置z-index。也使用
position: fixed;
保持元素到位，除非另有设置，否则通常会导致其他元素移动到其后面。
我所做的修复，我认为是你的问题，是：
移除：
body {
padding-top: 50px;
}
加了：
.navbar-fixed-top {
position: sticky;
}
.body-content {
position: relative;
}
我使用position sticky的原因仅限于个人偏好。如果你的导航栏仍然会停留在页面的顶部，那么使用sticky（我发现）可以更容易地安排相对于它的其他元素。换句话说，要阻止它铺设在顶部，而是放在它旁边直到滚动。
我希望这会有所帮助，这是我的第一个回答，如果它不是你想要的那样再次道歉！
祝你好运！