为什么我的常规导航栏覆盖标题，而折叠的标题没有？ （引导/全页）

Question

我的导航栏覆盖了我的标题，而不是相对于标题高度位于下方，我遇到了一些问题。当我使用一个较小的屏幕并且导航栏过去坍塌时，它的位置就像它应该的那样，为什么会这样？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

为什么使用.header位置固定？它由nav重叠     标头{       宽度：100％;      身高：100px;

    top: 0;
} use try this