次のdivの上に表示される固定位置部門

Question

私は以下のフィドルを持っていますhttps://jsfiddle.net/0vau6psp/これはエラーを複製するために必要な最小限のコードです。私はそれが位置と関係があると仮定しています：固定されていますが、私はそれを理解できません。

問題は、私の見出しがメインのコンテンツの上に直接表示されてしまい、その結果、メインのコンテンツが見えなくなってしまいました。私はそのコンテンツをヘッダーの下に表示したいと思います。

助けていただけたら幸いです！以下は、私のコードは、参考のためにもです：

HTML：

<header class="site-header" > 
    <div class="header-main" id="header-flow"> 
    <div class="container-fluid header-cont-top-nav"> 
     <div class="row"> 
     <div class="col-md-5 text-right hidden-xs hidden-sm"> 
      <ul> 
      <li>Link</li> 
      <li>Link</li> 
      <li>Link</li> 
      </ul> 
     </div> 
     </div> 
    </div><!--/.container--> 
    </div><!--/.header-main--> 
</header> 
    <main class="site-main-content" id="mainscrollcontent"> 
     <p> 
     {{ content_for_layout }} 
     Test 
     Test Content 
     Test Content line 4 
     </p> 
    </main> 

CSS：

#header-flow { 
    border-bottom: #73b2b2 3px solid; 
    z-index: 1000; 
    background-color: #fff; 
    position: fixed; 
    width: 100%; 
} 
#header-flow li{ 
display:inline-block; 
} 
.site-main-content { 
    margin-bottom: 0; 
    display:block; 
} 

Answer 1

あなたはそれをダウンさせるためにあなたの.site-メイン・コンテンツのCSSにpadding-topまたはmargin-topを追加することができます

Answer 2

ヘッダーをHTMLで最初に設定し、その位置を固定してからmainを設定します。

1. 停止ヘッダーの位置を固定：
   だからuが、これらのオプションを得ました。 。この行を削除してください。
2. change the order
3. 位置：相対;あなたがmargin-top:またはpadding:またはスタイルあなたfixedヘッダーの下にHTML要素の次のセットを使用したくない場合は

Answer 3

は、あなたがこれを達成するために、空白のdivを追加することができます。

.block { 
    height: 100px; // customize 
    width: 100%; 
} 

Example。 & Example。