Изображение и текст не идут за панель навигации

Question

Я делаю веб-страницу для своего дедушки, и моя страница навигации не остается поверх всего, когда я прокручиваю, вот мой html:

Тогда вот мой css (есть и другие страницы, но мне просто нужно знать, как это сделать на этой)

body{
    margin: 0;
    padding: 0;
}

div{
    width: 100%;
    height: 100%;
}
.navbar-default {
    background: none;
}
.navbar{
   position: fixed;
    padding: 10px 0 10px 10px;
    top: 0;
    width: 100%;

  }

  footer{
      background-color:#e6e6e6;
  }

  .jumbotron{
      background-image: url('download.jpeg');
      color: white;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      min-height: 400px;
      margin-top: 0px;
      margin-bottom: 8px;
  }
  a{
      color:#2e5984;
  }

 .navbar-brand{
     height: 60px;
     width: 100px;
 }


 #aboutusimg{
     background-size: 100%;
        background-image: url(download.jpeg);

        background-repeat:no-repeat;

        height: 400px;
        }


/* slider */

.carousel .carousel-item {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.carousel .carousel-item:first-of-type {
    background-image: url('download.jpeg');
}

.carousel .carousel-item:nth-of-type(2) {
    background-image: url("download.jpeg");
}

.carousel .carousel-item:last-of-type {
    background-image: url("download.jpeg");
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 50px;
    height: 50px;
}


/* partners slider, about page */






/* carousel */

h2{
    text-align:center;
    padding: 20px;
  }
  /* Slider */

  .slick-slide {
      margin: 0px 20px;
  }

  .slick-slide img {
      width: 100%;
  }

  .slick-slider
  {
      position: relative;
      display: block;
      box-sizing: border-box;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
              user-select: none;
      -webkit-touch-callout: none;
      -khtml-user-select: none;
      -ms-touch-action: pan-y;
          touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
  }

  .slick-list
  {
      position: relative;
      display: block;
      overflow: hidden;
      margin: 0;
      padding: 0;
  }
  .slick-list:focus
  {
      outline: none;
  }
  .slick-list.dragging
  {
      cursor: pointer;
      cursor: hand;
  }

  .slick-slider .slick-track,
  .slick-slider .slick-list
  {
      -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
  }

  .slick-track
  {
      position: relative;
      top: 0;
      left: 0;
      display: block;
  }
  .slick-track:before,
  .slick-track:after
  {
      display: table;
      content: '';
  }
  .slick-track:after
  {
      clear: both;
  }
  .slick-loading .slick-track
  {
      visibility: hidden;
  }

  .slick-slide
  {
      display: none;
      float: left;
      height: 100%;
      min-height: 1px;
  }
  [dir='rtl'] .slick-slide
  {
      float: right;
  }
  .slick-slide img
  {
      display: block;
  }
  .slick-slide.slick-loading img
  {
      display: none;
  }
  .slick-slide.dragging img
  {
      pointer-events: none;
  }
  .slick-initialized .slick-slide
  {
      display: block;
  }
  .slick-loading .slick-slide
  {
      visibility: hidden;
  }
  .slick-vertical .slick-slide
  {
      display: block;
      height: auto;
      border: 1px solid transparent;
  }
  .slick-arrow.slick-hidden {
      display: none;
  }

В нем говорится, что этот пост в основном представляет собой код, пожалуйста, добавьте еще несколько деталей. но я чувствую, что у меня есть все необходимые детали, поэтому я просто пишу случайный текст, чтобы посмотреть, исчезнет ли проблема go.

Answer 1

Это можно сделать с помощью свойства z-index в вашем CSS. Это свойство определяет порядок стека элементов. Я уверен, что вы хотите, чтобы ваша навигационная панель находилась в первую очередь на странице, поэтому вы должны разместить ее сверху. Вы можете узнать об этом подробнее на https://www.w3schools.com/cssref/pr_pos_z-index.asp. Вот пример:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
    Your code for the navbar here...
</nav>

<div id="content">
    Your page content here...
</div>

Тогда для вашего CSS:

.navbar {
    z-index: 99;
}

#content {
    z-index: 1;
}

Это должно помочь и помещает панель навигации поверх всего остального на странице. Вы можете изменить это в соответствии с вашими потребностями (например, некоторый контент должен располагаться на go над панелью навигации), но, как правило, вы должны использовать свойство z-index для складывания элементов.

Answer 2

вот что вы можете сделать, просто чтобы панель навигации оставалась наверху

добавьте этот код в свой .navbar класс

.navbar{
  position:fixed;
  z-index:10;
}

для простого объяснения position: fixed; сделает это плавать там, где он есть, но также не перемещаться, поэтому, пока он плавает, другой элемент может go над ним или позади него, тогда возникает необходимость надеть z-index:10;

подробнее о z -index подробнее о позиционировании