为什么我的常规导航栏覆盖 header 而折叠的导航栏却没有？ (bootstrap/fullpage)

Question

我的导航栏覆盖了我的 header 而不是相对于 header 高度定位在下方，我遇到了一些问题。当我使用较小的屏幕时，导航栏会像它应该的那样折叠到下面的位置，这是怎么回事？

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>

Answer 1

为什么使用 .header 固定位置？？它与导航重叠 header{ 宽度：100%；高度：100px;

    top: 0;
} use try this

为什么我的常规导航栏覆盖 header 而折叠的导航栏却没有？ (bootstrap/fullpage)

Why does my regular navbar cover header while the collapsed one does not? (bootstrap/fullpage)

html

css

twitter-bootstrap

fullpage.js