为什么我的常规导航栏覆盖标题，而折叠的标题没有？(Why does my regular navbar cover header while the collapsed one does not? (bootstrap/fullpage))

 我的导航栏覆盖了我的标题而不是相对于标题高度位于下方，我遇到了一些问题。 当我使用一个较小的屏幕并且导航栏过去折叠时它的位置就像它应该的那样，为什么会这样？ 
 
 
 
 
 
  
main {
  position: relative;
  background-image: url(asdasdads-321-redigerad-2.jpg);
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}

header {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
}

.container {
  position: relative;
}

.navbar-fixed-top {
  position: relative;
}

.navbar-default {
  position: relative;
  width: 100%;
  background-color: rgba(255, 255, 255, 0);
  border-bottom: 3px solid rgba(51, 51, 51, 0);
}
 
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<header>
  <h1>header</h1>
  <p>asdf asdas dasdadf dgfsd sdf asf fsdfsdf sdfa sfasf df</p>
</header>

<nav class="navbar-default" role="navigation">
  <div class="container">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-container">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar-container">
      <ul id="menu">
        <li><a href="#firstPage" title="Ab knapp" id="Ab-logo">UPPDRAG</a></li>
        <li data-menuanchor="secondPage" id="filosofi"><a href="#secondPage">FILOSOFI</a></li>
        <li data-menuanchor="thirdPage" id="uppdrag"><a href="#thirdPage">UPPDRAG</a></li>
        <li data-menuanchor="4thpage" id="karriär"><a href="#4thpage">KARRIÄR</a></li>
        <li data-menuanchor="5thpage" id="academy"><a href="#5thpage">ACADEMY</a></li>
        <li data-menuanchor="lastPage" id="kontakt"><a href="#lastPage">KONTAKT</a></li>
      </ul>
    </div>
  </div>
</nav>
 
 
 
 

I have some problems with my navbar covering my header instead of positioning below relative to the header height. When i use a smaller screen and the navbar goes over to collapse it positions below like it should, how come?
 
 
 
 
 
  
main {
  position: relative;
  background-image: url(asdasdads-321-redigerad-2.jpg);
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}

header {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
}

.container {
  position: relative;
}

.navbar-fixed-top {
  position: relative;
}

.navbar-default {
  position: relative;
  width: 100%;
  background-color: rgba(255, 255, 255, 0);
  border-bottom: 3px solid rgba(51, 51, 51, 0);
}
 
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<header>
  <h1>header</h1>
  <p>asdf asdas dasdadf dgfsd sdf asf fsdfsdf sdfa sfasf df</p>
</header>

<nav class="navbar-default" role="navigation">
  <div class="container">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-container">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar-container">
      <ul id="menu">
        <li><a href="#firstPage" title="Ab knapp" id="Ab-logo">UPPDRAG</a></li>
        <li data-menuanchor="secondPage" id="filosofi"><a href="#secondPage">FILOSOFI</a></li>
        <li data-menuanchor="thirdPage" id="uppdrag"><a href="#thirdPage">UPPDRAG</a></li>
        <li data-menuanchor="4thpage" id="karriär"><a href="#4thpage">KARRIÄR</a></li>
        <li data-menuanchor="5thpage" id="academy"><a href="#5thpage">ACADEMY</a></li>
        <li data-menuanchor="lastPage" id="kontakt"><a href="#lastPage">KONTAKT</a></li>
      </ul>
    </div>
  </div>
</nav>
 
 
 
 

原文：https://stackoverflow.com/questions/36056844