ラッパーの中にナビゲーションバーを固定する方法

私はスクロールダウンするときにラッパーの上部にあるナビゲーションバーを修正したいと思います。
しかし、#nav ulに位置を固定すると、ナビゲーションバーはラッパーのようになります。ナビゲーションバーがラッパーここラッパーの中にナビゲーションバーを固定する方法

> <DOCTYPE html> 
> 
> <html lang="en"> 
> 
> <head>  <link rel="stylesheet" type="text/css" href="test.css">  
> <title>KDU Music</title> <meta charset="utf-8"> </head> 
> 
> 
> <body> <div id="title"> 
>   <p><h1>Welcome to KDU MUSIC CENTER</h1></p> 
>   </div> 
>  
> 
> <div id= "wrapper"> <div id="nav">  <ul> 
>   <li><a href="index.html">Home</a></li> 
>   <li><a href="findoutmore.php">Find out more</a></li> 
>   <li><a href="offer.html">Offer</a></li> 
>   <li><a href="credit.html">Credit</a></li> 
>   <li><a href="#">Admin</a></li> 
>   <li><a href="wireframe.html">WireFrame</a></li>  </ul> </div> 
> 
> <div id="content"> 
> 
> <div class = "first">  <p><h1>123</h1></p>   <p><h1>123</h1></p> 
>  <p><h1>123</h1></p>   <p><h1>123</h1></p>  </div>   <div class = 
> "first"> 
>   <p><h1>123</h1></p>   <p><h1>123</h1></p>   <p><h1>123</h1></p>   <p><h1>123</h1></p> 
>   </div> 
>   <p><h1>123</h1></p>  <p><h1>123</h1></p>  <p><h1>123</h1></p>  <p><h1>123</h1></p>  <p><h1>123</h1></p>  <p><h1>123</h1></p> 
> <p><h1>123</h1></p>  <p><h1>123</h1></p>  <p><h1>123</h1></p> 
> <p><h1>123</h1></p>  <p><h1>123</h1></p> 
> 
> </div> </div> 
> 
> </body> 
> 
> </html>

内にある必要があります内
はここで、私のhtmlコードであること

body{background-color : #C0C0C0; 
    margin : 0px; 

} 

#nav ul { background-color: #333; 
     list-style-type: none; 
     text-align: center; 
     top : 0px; 
     width : 100% ; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 


     } 

#nav li { 
     display: inline; 


} 

#nav li a { 

    color: white; 
    padding: 20px 30px; 
    text-decoration: none; 
    font-size : 40px;  
} 

li a:hover { 
    background-color: #111; 
} 

#wrapper { margin : 3% 5%; 
      background-color: #FFF5EE; 
      min-width : 400px; 
      } 


#title {text-align : center; 
     font-size : 30px; 
     text-decoration: underline; 
} 

#content {padding : 3%;} 

.first{border: 5px solid;}

出典

2016-09-30 Chi Shen

HTMLコード????? – Gowtham

がラッパーにナビゲーションメニューを修正するには、私のCSSで、ラッパー要素は相対位置を必要とします。

#wrapper { 
    position:relative; 
} 

#nav ul { 
    position:fixed; 
    top:0; 
    left:0; 
}

出典

2016-09-30 09:20:54

まだ同じです... –

スクロールすると、ラッパーの位置が変わりますか？上記の変更では、ナビゲーションはラッパーに固執します。スクロールするときにラッパー要素を移動すると、ナビゲーションも一緒に移動します。 –

位置を追加すると#nav ulに固定され、navは上に示した画像のようにラッパーを使い果たしました。とはい、ナビスティックは上のラッパーに固定する必要があります... what iラッパーに戻ってナビゲーションバーを置くことを試みる –

おそらくz-インデックスを使用できます。 Z-indexではこれを修正することが可能です。先週私のウェブサイトで同じ問題があった

出典

2016-09-30 09:40:25

ラッパーの中にナビゲーションバーを固定する方法

答えて

関連する問題