ナビゲーションバーがヘッダーの上部に表示されます

次のCSSコードがあります。私の問題は、私のナビゲーションバーが私のヘッダーブロックの上に来ることです。ナビゲーションバーをヘッダーから真下に移動するにはどうすればよいですか？ナビゲーションバーがヘッダーの上部に表示されます

header {                     
    background: black;                 
    height: 60px;                  
    left: 0;                    
    margin: 0;                   
    padding: 0;                   
    position: absolute;                 
    width: 100%;                   
}                      

header img {                    
    float: left;                   
    margin-right: 10px;                 
    position: relative;                 
}                      

header h1 {                    
    color: white;                  
    font: 26px Helvetica, Arial, sans-serif;            
    line-height: 60px;                 
    margin: 0;                   
    vertical-align: middle;                
}                      

nav {                     
    background: black;                 
    margin: 0;                   
    padding: 0;                   
    position: absolute;                 
    width: 100%;                   
}

出典

2011-08-26 H.A

注この記事を読みます次にコードを表示するために、エディタでコードオプションを使用してください。 –

HTMLを追加してください。CSSだけでは不十分です。 –

@ H.A; headerブロック& navブロックにposition absoluteを指定します。あなたが要素にposition absoluteを与えるときに、その要素は、通常のフローのために削除

CSS：

nav { 
top:60px; 
padding: 0; 
position: absolute; 
width: 100%; 
}

私はあなたのために、コードを再フォーマットよりhttp://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

出典

2011-08-26 13:22:19 sandeep

あなたのnavbarと同じ高さのマージントップをnavに与えます。

nav { 
background: black; 
margin: 0; 
margin-top:60px; 
padding: 0; 
position: absolute; 
width: 100%; 
}

出典

2011-08-26 13:18:31 corymathews

<!DOCTYPE html> 
<html > 
    <head> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <style> 
.navbar-fixed-top{ 

position:static; 

} 
</style> 
    </head> 

    <body> 
<div class="row"> 
      <div class="col-lg-12"> 
       <div class="intro-message"> 
        <h1>HOST</h1> 
        <h3>two is better than one</h3> 
        <hr class="intro-divider"> 
        <ul class="list-inline intro-social-buttons"> 
         <li> 
          <a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a> 
         </li> 
         <li> 
          <a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a> 
         </li> 
         <li> 
          <a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
</div> 


    <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation"> 
     <div class="container topnav"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand topnav" href="/">Host</a> 
      </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="#">Login</a> 
       </li> 
       <li> 
        <a href="#">Sign up</a> 
       </li> 
      </ul> 

      <form class="navbar-form navbar-right" role="search"> 
       <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 

     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 


    </body> 
</html>

出典

2015-07-12 07:51:45

これはあなたが探しているものだと思います。 HTML文書のコード全体をコピーしてブラウザで実行するだけです。ありがとう –

ナビゲーションバーがヘッダーの上部に表示されます

答えて

関連する問題