当导航栏设置为'位置：绝对;'时，jumbotron div内的图像覆盖导航栏

Question

我正在尝试将导航栏设置为position: absolute;，以便在展开时不会使 html 向下移动。但是当我这样做时，导航下方的 div 向上移动并覆盖导航栏。

html:

<nav class="navbar navbar-expand-md navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">testing</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#details">About</a>
      <a class="nav-item nav-link" href="#abilities">Abilities</a>
    </div>
  </div>
</nav>

 <div class="jumbotron text-center" id="main-jum">
    <img src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">

 </div>

CSS：

.navbar {
  position: absolute;
  width: 100%;
}

body {
  background-color:#000101;
  font-family: 'Montserrat', sans-serif;
}


nav a {
  color: #00253f!important;
}

nav button{
  background-color: #00253f!important;
  outline:none!important;
}

#main-jum {
  border-radius: 0!important;
  padding: 0;
  width: auto;
  background-color: Black;

}

#main-jum img {
  width: 100%;
  opacity: 0.5;
}

这是我的代码笔链接： https://codepen.io/obiwankenoobi/pen/PQpopE?editors=1100

Answer 1

如果可行，请尝试复制粘贴整个 css，然后我将解释我所做的更改以及原因

演示：

.navbar {
  position: relative;
  top : 0;
  z-index: 10;
  width: 100%;
  border:1px solid white
}

body {
  background-color:#000101;
  font-family: 'Montserrat', sans-serif;
}


nav a {
  color: #00253f!important;
}

nav button{
  background-color: #00253f!important;
  outline:none!important;
}

#main-jum {
  top:0;
  position:absolute;
  border-radius: 0!important;
  padding: 0;
  width: auto;
  background-color: Black;
  border:1px solid yellow;

  
}

#main-jum img {
  width: 100%;
  height:700px;
  opacity: 0.5;
}

nav button:hover {
  background-color:	#003a3f!important;
}

nav a:hover {
  color: #003a3f!important;
}

#abilities img {
  width: 30vmin;
  
}

#details {
  margin-top:100px;
  margin-bottom: 150px;
}

#abilities {
  margin-bottom: 300px;
}

p {
  font-size: 20px;
  color: 	#00253f;
}

a:hover {
  text-decoration: none;
}

footer {
  margin-top: 190px;
}

h4 {
  font-size: 6vmin;
  color: #003a3f;
}

.right {
  float: right;
}

.left {
  float: left;
}

@media (max-width: 768px) {
  #abilities img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
    width: 50vmin;
  }
  
  #main-jum {
    display: block;
  }
  .col-sm-4 {
    margin-top: 25px;
  }
  
  p {
  font-size: 3.5vmin;
}
  
  #abilities {
    margin-bottom: 30px;
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<nav class="navbar navbar-expand-md navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">ob1wankenoooob1</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#details">About</a>
      <a class="nav-item nav-link" href="#abilities">Abilities</a>
    </div>
  </div>
</nav>


<div id="details" class="container-fluid">
    <div class="row">
      <div id="about" class="col-md-8">
          <h4>about me</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum odio mauris, vitae finibus erat imperdiet sit amet. Donec eget pretium turpis. Curabitur elit neque, finibus vel enim in, laoreet scelerisque ligula. Sed at augue sed lorem sollicitudin pulvinar. Sed ut elit ullamcorper, aliquet ante ac, maximus urna. Sed a nisl eu massa imperdiet pellentesque. Pellentesque non justo vitae libero rhoncus posuere in eu est. Maecenas eu fringilla orci, eu porta ex.</p>
     </div>
      
      <div id="more" class="col-md-4"> 
            <h4>more</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum odio mauris, vitae finibus erat imperdiet sit amet. Donec eget pretium turpis. Curabitur elit neque.</p>
      </div>
    </div> <!--row end-->
</div> <!-- container-fluid end-->

<div class="container">
  <div class="row text-center" id="abilities">
    <div class="col-sm-4 img-abilities">
      <img id="code-img" src="https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Html-512.png">
    </div>

     <div class="col-sm-4">
      <img class="img-abilities" id="responsive-img" src="https://cdn4.iconfinder.com/data/icons/flat-services-icons/512/responsive-web.png">
    </div>

    <div class="col-sm-4">
      <img id="design-img" src="http://trstech.ca/wp-content/uploads/2016/03/design_icon.png">
    </div>
  </div> <!-- abilities end -->
</div> <!-- container-fluid ends-->

<footer class="text-center">
  <p >all rights reserved  <a href="https://twitter.com/ob1wankenoooob1" target="_blank">@ob1wankenoooob1</a></p>
  <p id="year">test</p>
</footer>


<script type="text/javascript">

  var date = new Date();
  var fullYear = date.getFullYear();
  var yearElement = document.getElementById("year");
  yearElement.innerHTML = fullYear + ' &copy;';

</script>

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>

<script>
  window.sr = ScrollReveal();
  sr.reveal('#about', {
    duration: 2000,
    origin:'bottom',
    viewFactor: 0.9 ,
    distance:'300px',
    reset: true
  });
  
  sr.reveal('#main-jum', {
    opacity: 0 ,
    duration: 2000 ,
    reset: true , 
    viewFactor: 0.6
  });
  
  sr.reveal('#more', {
    duration: 2000,
    origin:'bottom',
    viewFactor: 0.9 ,
    distance:'300px',
    reset: true
  });
  
    sr.reveal('#code-img', {
    duration: 2000,
    origin:'bottom',
    viewFactor: 0.9 ,
    distance:'300px',
    reset: true
  });
  
    sr.reveal('#responsive-img', {
    duration: 2000,
    origin:'bottom',
    viewFactor: 0.9 ,
    distance:'300px',
    reset: true
  });
  
    sr.reveal('#design-img', {
    duration: 2000,
    origin:'bottom',
    viewFactor: 0.9 ,
    distance:'300px',
    reset: true
  });
            
</script>

Answer 2

好的，所以z-index: 10; 是修复我的代码的原因，这就是我想要得到的结果。我应该听完整的指令here，但我忽略了z-index: 10;，这就是导致问题的原因。

.navbar {
  position: absolute;
  top : 0;
  z-index: 10;
  width: 100%;
}

body {
  background-color:#000101;
  font-family: 'Montserrat', sans-serif;
}


nav a {
  color: #00253f!important;
}

nav button{
  background-color: #00253f!important;
  outline:none!important;
}

#main-jum {
  border-radius: 0!important;
  padding: 0;
  width: 100%;
  height: auto;
  background-color: Black;

}

#main-jum img {
  width: 100%;
  height:auto;
  opacity: 0.5;
}

nav button:hover {
  background-color: #003a3f!important;
}

nav a:hover {
  color: #003a3f!important;
}

#abilities img {
  width: 30vmin;

}

#details {
  margin-top:100px;
  margin-bottom: 150px;
}

#abilities {
  margin-bottom: 300px;
}

p {
  font-size: 20px;
  color:    #00253f;
}

a:hover {
  text-decoration: none;
}

footer {
  margin-top: 190px;
}

h4 {
  font-size: 6vmin;
  color: #003a3f;
}

.right {
  float: right;
}

.left {
  float: left;
}

@media (max-width: 768px) {
  #abilities img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
    width: 50vmin;
  }

  #main-jum {
    display: block;
  }
  .col-sm-4 {
    margin-top: 25px;
  }

  p {
  font-size: 3.5vmin;
}

  #abilities {
    margin-bottom: 30px;
  }

  #main-jum img {
    max-width: 100%;
    min-height: 400px;
    object-fit:cover;
  }

}