Панель навигации под контентом

Question

Я использую этот учебник. Поэтому у меня есть панель навигации со ссылками на изображения, которая скрывается, когда пользователь прокручивает страницу вниз. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_hide_scroll

Так что это работает, хотя.

Однако при прокрутке вниз изображения в теле отображаются над панелью навигации. Текст в теле, однако, не затронут. Таким образом, мой вопрос заключается в том, как предотвратить это. Другое дело, как сделать так, чтобы заголовок в виде оранжевой «Королевы образцов» отображался под панелью навигации, поскольку теперь она скрыта под ней. Я хочу, чтобы содержимое начиналось под панелью навигации

 h1 {
    text-align: center;
    font-family: "Century Gothic";
    font-size:50px;
    font-weight: bold;

  }

  p {
    color: lightgrey;
    text-align: center;
    font-family: "Century Gothic";
    font-size:40px;

  }

  h2 {
    color: black;
    text-align: center;
    font-family: "Century Gothic";
    font-size:20px;
    padding-right: 15px;
    padding-left: 15px;


  }










    /* Now disable grayscale on hover */
    #border:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    }


    #border {
    border-radius: 10px;
    text-align: center;
    vertical-align: middle;
    filter: gray; /* For IE6-9 */
    filter: grayscale(1); /* For Microsoft Edge and Firefox 35+ */
    -webkit-filter: grayscale(1); /* For Google Chrome, Safari 6+ & Opera 15+ */

    }











    /* Slideshow container */
    .slideshow-container {
      max-width: 500px;
      position: relative;
      margin: auto;
      padding-right: 15px;
    padding-left: 15px;
    }

    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 40%;
      width: auto;
      padding: 20px;
      color: lightgrey;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 10px 10px 0;
      user-select: none;
    }

    /* Position the "next button" to the right */
    .next {
      right: 0;
    }

    /* On hover, add a grey background color */
    .prev:hover, .next:hover {
      background-color: #f1f1f1;
      color: black;
    }








    /* width */
::-webkit-scrollbar {
    width: 20px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 0px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: lightgrey; 
    border-radius: 5px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: orange; 
  }







  #navbar {
    background-color: #333; /* Black background color */
    position: fixed; /* Make it stick/fixed */
    top: 0; /* Stay on top */
    width: 100%; /* Full width */
    transition: top 0.3s; /* Transition effect when sliding down (and up) */
  }

  /* Style the navbar links */
  #navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 15px;
    text-decoration: none;
  }

  #navbar a:hover {
    background-color: #ddd;
    color: black;
  }

Answer 1

Пожалуйста, добавьте следующие строки к вашему CSS.

#navbar{
z-index: 1000;
}
body{
padding-top: 200px;
}

Вы можете контролировать значение отступа в соответствии с высотой вашей панели навигации.