如何修復導航欄內的包裝

我想修復導航欄在包裝的頂部，當我滾動下來。
但是當我把位置：固定在#nav ul，導航欄去beyong包裝。
這裏是我的html代碼，裏面的導航欄應該是包裝如何修復導航欄內的包裝

> <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>

這裏裏面是我的CSS

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

要解決的導航菜單的包裝中，包裝元素將需要一個相對位置。

#wrapper { 
    position:relative; 
} 

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

來源

2016-09-30 09:20:54

仍然一樣... –

當你滾動，你是否改變包裝的位置？通過上述更改，如果您要在滾動時移動包裝器元素，則導航將粘貼到包裝器上，然後導航將隨之移動。 –

當我添加位置：固定在#nav ul，導航用完包裝作爲上面顯示的圖像.. 是的，導航棒應堅持在頂部我的包裝... 什麼我試圖做的是把導航欄放回包裝 –

也許你可以使用z-index。用z-index可以解決這個問題。我上週在我的網站上遇到了同樣的問題

來源

2016-09-30 09:40:25

如何修復導航欄內的包裝

回答

相關問題