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

Question

Кто-нибудь может помочь мне остаться на вершине? так что это не слипается, я пробую каждую позицию абсолютную, липкую, фиксированную, но не работает, продолжаю следовать при прокрутке. я не использую фреймворк css, если я использую фреймворк css мой свиток параллакса просто сломался ._.

<- Комментарий ->

мммм это в основном коде ... ооо, это просто случайное слово для меня. test 1 2 3 бла бла бла

https://codepen.io/BlaupilzHD/pen/MWwGpMY

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      text-decoration: none;
      list-style: none;
    }

    html,
    body {
      background-color: #FEDCC8;
      height: 100%;
    }

    #navbar {
      position: absolute;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
    }

    nav {
      height: 80px;
      width: 100%;
    }

    label.logo {
      color: rgb(255, 255, 255);
      font-size: 24px;
      line-height: 80px;
      padding: 0 100px;
      font-weight: bold;
    }


    .checkbtn {
      font-size: 30px;
      color: rgb(255, 255, 255);
      float: right;
      line-height: 80px;
      margin-right: 40px;
      cursor: pointer;
      display: none;
    }

    #check {
      display: none;
    }

    .cv {
      border-radius: 20px;
      margin: 18px 30px;
      padding: 15px 30px;
      color: azure;
      background-color: #2D112B;
      float: right;
    }

    /* Parallax Scroll */

    .parallax {
      -webkit-perspective: 100px;
              perspective: 100px;
      height: 100vh;
      overflow-x: hidden;
      overflow-y: auto;
      position: absolute;
      top: 0;
      left: 50%;
      right: 0;
      bottom: 0;
      margin-left: -1500px;
    }

    .parallax__layer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .parallax__layer img {
      display: block;
      position: absolute;
      bottom: 0;
    }

    .parallax__cover {
      background: #2D112B;
      display: block;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      height: 2000px;
      z-index: 2;
    }

    .parallax__layer__0 {
      -webkit-transform: translateZ(-300px) scale(4);
              transform: translateZ(-300px) scale(4);
    }

    .parallax__layer__1 {
      -webkit-transform: translateZ(-250px) scale(3.5);
              transform: translateZ(-250px) scale(3.5);
    }

    .parallax__layer__2 {
      -webkit-transform: translateZ(-200px) scale(3);
              transform: translateZ(-200px) scale(3);
    }

    .parallax__layer__3 {
      -webkit-transform: translateZ(-150px) scale(2.5);
              transform: translateZ(-150px) scale(2.5);
    }

    .parallax__layer__4 {
      -webkit-transform: translateZ(-100px) scale(2);
              transform: translateZ(-100px) scale(2);
    }

    .parallax__layer__5 {
      -webkit-transform: translateZ(-50px) scale(1.5);
              transform: translateZ(-50px) scale(1.5);
    }

    .parallax__layer__6 {
      -webkit-transform: translateZ(0px) scale(1);
              transform: translateZ(0px) scale(1);
    }

            <nav id = "navbar">
                <input type = "checkbox" id = "check">
                <label for = "check" class = "checkbtn">
                    <i class="fa fa-bars"></i>
                </label>
                <label class = "logo">My Name</label>
                <button class="cv">Download CV</button>
            </nav>

            <div class="parallax">
                <div class="parallax__layer parallax__layer__0">
                    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true" />
                </div>
                <div class="parallax__layer parallax__layer__1">
                    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true" />
                </div>
                <div class="parallax__layer parallax__layer__2">
                    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true" />
                </div>
                <div class="parallax__layer parallax__layer__3">
                    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true" />
                </div>
                <div class="parallax__layer parallax__layer__4">
                    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true" />
                </div>
                <div class="parallax__layer parallax__layer__5">
                    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true" />
                </div>
                <div class="parallax__layer parallax__layer__6">
                    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true" />
                </div>
                <div class="parallax__cover"></div>
            </div>
        </body>

Answer 1

Ваша навигация зависает из-за скрытого стиля переполнения div. Согласно вашему коду, у вас есть два элемента div, и оба они являются абсолютными, то есть ни у одного из них нет своего собственного пространства. Ваш эффект параллекса занимает полный видимый экран. так что навигационная панель ограничена и не может переместиться. Надеюсь, это поможет.