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;
}

这是我的codepen链接： 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;
  }

}

当导航栏设置为＆＃39; position：absolute;＆＃39;当jumbotron div里面的图像覆盖导航栏。

2 个答案: