Css 位置为 Sticky 且宽度为 100% 的网格和导航栏

Question

当我尝试使用 CSS 网格时，我的导航栏处于粘性位置且宽度为 100%，我遇到了两件事。

出于某种原因，导航栏在包含导航元素的网格末尾消失了，我不知道为什么，但我希望它在整个页面中都可见。我试图设置更高的 z 索引但没有成功。预先感谢您的帮助。

body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    background-color: #29be29;

}

.container {
    display: grid;

}

.banner {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(7, 1fr);
    background-color: rgb(255, 255, 255);
    height: 120vh;
}

/* ///////////////////////////////////////////////////////////////////////////// Création menu //////////////////////////////////////////////////////////////////// */
.menu {
    display: grid;
    justify-content: center;
    grid-area: 1/2/2/6;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: bold;
    align-self: center;
    background-color: rgb(82, 189, 221);
    position: sticky;
    top: 0;
    place-self: center;
    margin-top: 4.7vh;


}

.list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

}

.tabs {
    list-style-type: none;
    margin: 0 2vw;

}

.links {
    text-decoration: none;
    color: #2c5f8b;
    white-space: nowrap;

}

/* /////////////////////////////////////////////////////////////////////////// placement logo ///////////////////////////////////////////////////////////////////// */
#logo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-area: 1/2/2/3;
    mix-blend-mode: multiply;
}

.logosize {
    align-self: center;
    justify-self: start;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    margin: 0;
}


.secgrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr 1fr 4fr 1fr 1fr;
}

.titlesec {
    grid-column: 3/5;
    display: flex;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 2.3rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #5046d6;
    white-space: nowrap;
}

/* //////////////////////////////////////////////////////////////////// CARD SERVICE ////////////////////////////////////////////////////////////////// */
.cardservice {
    grid-area: 4/1/5/3;
    justify-self: center;


}


.gridcard {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(12, 1fr);
}

.paragraph {
    border-radius: 40px;
    width: 390px;
    height: 350px;
    border: 18px solid #e5d0ce;
    background-color: black;
    position: relative;
    padding-top: 15px;
}

<body class="container">
    <!-- DEBUT ARTICLE -->
    <article>
        <section>
            <!-- ////////////////////////////////////////////////PARTIE HEADER/BANNER///////////////////////////////////////////////// -->

            <div class="banner">
                <nav class="menu">
                    <ul class="list">
                        <li class="tabs"> <a href="" class="links">Services</a> </li>
                        <li class="tabs"> <a href="" class="links">Compétences</a> </li>
                        <li class="tabs"> <a href="" class="links">Portfolio</a> </li>
                        <li class="tabs"> <a href="" class="links">À propos</a> </li>
                        <li class="tabs"> <a href="" class="links">Contact</a> </li>
                    </ul>
                </nav>
                <div id="logo">
                    <img class="logosize" src="../Site personnel_freelance/Assets/IMG/Icons_contacts/tel_icone.png"
                        alt="">
                </div>

                <!-- ////////////////////////////////////////////////PARTIE MES SERVICES//////////////////////////////////////////////// -->

        </section>
        <section>
            <div class="secgrid">
                <h2 class="titlesec">Mes services</h2>
                <div class="diamond2">
                    <div class="littlediamond"></div>
                    <div class="littlediamond"></div>
                    <div class="littlediamond"></div>
                    <div class="littlediamond"></div>
                </div>

                <!--///////////////////////////////// création cartes services //////////////////////////// -->
                <!-- carte service 1 -->
                <div class="cardservice">
                    <p class="paragraph gridcard">
                        <span class="">
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam asperiores cum iste
                            nulla omnis modi minus, earum temporibus deleniti voluptatum eius sit magni iusto
                            exercitationem, porro autem eos saepe accusamus.
                            <span class="titlecard">lorem</span>
                            <span class="presCard">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed officia similique impedit
                                ut perferendis, tempore vel pariatur quam laudantium enim eligendi, et iure rem
                                asperiores, fugit quasi dolore deleniti nostrum.
                            </span>

                    </p>
                </div>
            </div>
        </section>
    </article>

</body>

Answer 1

将导航栏移出 section:

body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  background-color: #29be29;
}

.container {
  display: grid;
}

.banner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(7, 1fr);
  background-color: rgb(255, 255, 255);
  height: 120vh;
}


/* ///////////////////////////////////////////////////////////////////////////// Création menu //////////////////////////////////////////////////////////////////// */

.menu {
  display: grid;
  justify-content: center;
  grid-area: 1/2/2/6;
  font-family: 'Roboto', sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: bold;
  align-self: center;
  background-color: rgb(82, 189, 221);
  position: sticky;
  top: 0;
  place-self: center;
  margin-top: 4.7vh;
}

.list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.tabs {
  list-style-type: none;
  margin: 0 2vw;
}

.links {
  text-decoration: none;
  color: #2c5f8b;
  white-space: nowrap;
}


/* /////////////////////////////////////////////////////////////////////////// placement logo ///////////////////////////////////////////////////////////////////// */

#logo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-area: 1/2/2/3;
  mix-blend-mode: multiply;
}

.logosize {
  align-self: center;
  justify-self: start;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  margin: 0;
}

.secgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr 1fr 4fr 1fr 1fr;
}

.titlesec {
  grid-column: 3/5;
  display: flex;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  font-size: 2.3rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #5046d6;
  white-space: nowrap;
}


/* //////////////////////////////////////////////////////////////////// CARD SERVICE ////////////////////////////////////////////////////////////////// */

.cardservice {
  grid-area: 4/1/5/3;
  justify-self: center;
}

.gridcard {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

.paragraph {
  border-radius: 40px;
  width: 390px;
  height: 350px;
  border: 18px solid #e5d0ce;
  background-color: black;
  position: relative;
  padding-top: 15px;
}

<body class="container">

  <!-- DEBUT ARTICLE -->
  <article>
    <nav class="menu">
      <ul class="list">
        <li class="tabs"> <a href="" class="links">Services</a> </li>
        <li class="tabs"> <a href="" class="links">Compétences</a> </li>
        <li class="tabs"> <a href="" class="links">Portfolio</a> </li>
        <li class="tabs"> <a href="" class="links">À propos</a> </li>
        <li class="tabs"> <a href="" class="links">Contact</a> </li>
      </ul>
    </nav>
    <section>
      <!-- ////////////////////////////////////////////////PARTIE HEADER/BANNER///////////////////////////////////////////////// -->

      <div class="banner">

        <div id="logo">
          <img class="logosize" src="../Site personnel_freelance/Assets/IMG/Icons_contacts/tel_icone.png" alt="">
        </div>

        <!-- ////////////////////////////////////////////////PARTIE MES SERVICES//////////////////////////////////////////////// -->

    </section>
    <section>
      <div class="secgrid">
        <h2 class="titlesec">Mes services</h2>
        <div class="diamond2">
          <div class="littlediamond"></div>
          <div class="littlediamond"></div>
          <div class="littlediamond"></div>
          <div class="littlediamond"></div>
        </div>

        <!--///////////////////////////////// création cartes services //////////////////////////// -->
        <!-- carte service 1 -->
        <div class="cardservice">
          <p class="paragraph gridcard">
            <span class="">
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam asperiores cum iste
                            nulla omnis modi minus, earum temporibus deleniti voluptatum eius sit magni iusto
                            exercitationem, porro autem eos saepe accusamus.
                            <span class="titlecard">lorem</span>
            <span class="presCard">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed officia similique impedit
                                ut perferendis, tempore vel pariatur quam laudantium enim eligendi, et iure rem
                                asperiores, fugit quasi dolore deleniti nostrum.
                            </span>

          </p>
        </div>
      </div>
    </section>
  </article>

</body>

Css 位置为 Sticky 且宽度为 100% 的网格和导航栏

Css grid and navbar with position Sticky and 100% width

html

css

css-position

width

css-grid