爲什麼我的常規導航欄封面標題與摺疊頁面沒有關聯？ （bootstrap/fullpage）

Question

我的導航欄覆蓋了我的標題，而不是相對於標題高度的下方，所以出現了一些問題。當我使用一個較小的屏幕和導航欄去塌下它的位置應該如何，如何呢？

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位置固定??它通過導航 標題重疊{ 寬度：100％; height：100px;

top: 0; 
} use try this