내비게이션 막대가 머리 위에 나타납니다.

다음 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만으로는 충분하지 않습니다. –

@HA; 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

탐색 표시 줄에 너비가 같은 여백 높이를 지정하십시오.

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 문서에 전체 코드를 복사하고 브라우저에서 실행하십시오. 감사 –

내비게이션 막대가 머리 위에 나타납니다.

답변

관련 문제