相対1の絶対/固定小数点をラップします

Question

私のウェブサイトに絶対配置されたメニューがあります。私は（それが比較的に配置されたかのように似ている）

HTML

<nav id="s-nav-wrap"> 

     <div id="s-nav" class="row"> 

     <div class="col-sm-4"> 
      <a href="..." id="s-logo"></a> 
     </div> 

     <div class="col-sm-8 align-right"> 
      <?php wp_nav_menu(array('container_class' => 'main-nav', 'theme_location' => 'primary')); ?> 

      <div id="btn-home"> <a href="...">HOME</a> </div> 
     </div> 

    </div> 

</nav> 

CSS

#s-nav-wrap { 
    position: relative; 
} 

#s-nav { 
    position: absolute; 
    z-index: 150; 
    top: 0; left: 0; right: 0; 
    width: 100%; 
    margin-top: 25px; padding-left: 10px; 
} 

Answer 1

それabsoluteにすることで、テキストがメニューの下に残っていることを確認するには、あなたはそれを取っています通常の流れから外れていても、それはrelative要素内にあるかどうかにかかわらずです。

は

• が一定の高さ（height: 100px）メニューを設定し、主コンテンツaを与えるposition: relative
• と通常の流れのメニュー部分を作る代わりに、次のオプションを検討CSS reference of positioning schemes

  を見ます同じ値のマージン（margin-height: 100px）