Блог

Главная - Вопросы по программированию - как исправить навигационную панель внутри оболочки

как исправить навигационную панель внутри оболочки

#html #css

#HTML #css

Вопрос:

я хочу исправить панель навигации в верхней части оболочки при прокрутке вниз.
но когда я помещаю position: fixed в #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;}

введите описание изображения здесь

Ответ №1:

Чтобы привязать меню навигации к оболочке, элементу оболочки потребуется относительное положение.

 #wrapper {
    position:relative;
}

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

Комментарии:

1. При прокрутке вы меняете положение оболочки? С вышеуказанными изменениями ваша навигация будет привязана к вашей оболочке, если вы перемещаете элемент оболочки при прокрутке, тогда навигация будет перемещаться вместе с ним.

2. когда я добавил position:fixed in в #nav ul, навигация вышла из оболочки, как показано на рисунке выше. и да, навигационная панель должна оставаться в верхней части моей оболочки… то, что я пытаюсь сделать, это поместить панель навигации обратно в оболочку

Ответ №2:

Может быть, вы можете использовать z-индекс. Возможно ли это исправить с помощью z-индекса. На прошлой неделе у меня была такая же проблема на моем веб-сайте