如何修复包装器内的导航栏答案

【问题标题】：how to fixed the nav bar inside wrapper如何修复包装器内的导航栏
【发布时间】：2016-09-30 09:17:28
【问题描述】：

我想在向下滚动时修复包装器顶部的导航栏。
但是当我将位置：固定在 #nav ul 中时，导航栏会超出包装。
这是我的 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;}

【问题讨论】：

HTML代码?????

标签： html css

【解决方案1】：

要将导航菜单固定到包装器，包装器元素需要一个相对位置。

#wrapper {
    position:relative;
}

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

【讨论】：

当你滚动时，你是否改变了包装器的位置？通过上述更改，您的导航将坚持您的包装，如果您在滚动时移动包装元素，那么导航将随之移动。
当我将位置 :fixed 添加到 #nav ul 时，导航超出了包装，如上图所示。是的，导航棒应该贴在我的包装顶部...我尝试做的是将导航栏放回包装器中

【解决方案2】：

也许您可以使用 z-index。使用 z-index 可以解决此问题。我上周在我的网站上遇到了同样的问题

【讨论】：