我的导航栏在移动视图上被其他元素淹没/溢出

问题描述 投票：0回答：2

/* ************************** */
/* BELOW 1350px (Smaller dekstops) */
/* ************************** */

@media (max-width: 84.5em) {
  .sticky-note {
    width: 30rem;
    height: 30rem;
  }

  .motto-heading {
    font-size: 5.2rem;
  }

  .product-description {
    font-size: 1rem;
  }
}

/* ************************** */
/* BELOW 1200px (Landscape Tablets) */
/* ************************** */

@media (max-width: 65em) {
  html {
    font-size: 56.25%;
  }

  .motto {
    top: 40%;
    transform: translate(0, -50%);
  }

  .sticky-note {
    width: 24rem;
    height: 24rem;
    padding: 1.6rem;
  }

  .motto-heading {
    font-size: 3.6rem;
  }

  .btn,
  .btn:link,
  .btn:visited {
    font-size: 1.2rem;
    padding: 0.8rem 2.4rem;
  }

  .product-description {
    font-size: 0.8rem;
  }
}

/* ************************** */
/* BELOW 944px (Tablets) */
/* ************************** */

@media (max-width: 58em) {
  .header {
    padding: 0 1.6rem;
  }

  .hero-section {
    margin-bottom: 3.2rem;
  }

  .margin-bottom-md {
    margin-bottom: 3.2rem !important;
  }

  .sticky-note {
    width: 20rem;
    height: 20rem;
    padding: 1.2rem;
  }

  .motto-heading {
    font-size: 3.6rem;
  }

  .motto {
    top: 40%;
    right: 50%;
    transform: translate(50%, -50%);
  }

  .btn,
  .btn:link,
  .btn:visited {
    font-size: 0.9rem;
    padding: 0.8rem 2.4rem;
  }

  .record {
    display: grid;
    grid-template-columns: 1fr;
  }

  .new-sticky {
    margin: 0 auto;
    text-align: center;
  }

  .btn--right {
    margin: 0 auto;
  }

  .hero-btn {
    padding: 0.8rem 1.2rem !important;
  }

  .playlist {
    display: grid;
    grid-template-columns: 1fr;
  }

  .playlist-container {
    grid-row: 1 / 2;
  }

  .section-playlist {
    margin-bottom: 4.8rem;
  }

  .footer {
    margin-top: 9.6rem;
  }

  .footer-logo {
    height: 8rem;
  }

  .footer-heading {
    font-size: 1.8rem;
  }

  .footer-link:link,
  .footer-link:visited {
    font-size: 1rem;
  }

  .copyright {
    font-size: 1.2rem;
  }

  /* Mobile navigation (hamburger menu) */

  .btn-mobile-nav {
    display: block;
    z-index: 99999;
  }

  .main-nav {
    background-color: rgba(255, 255, 255, 0.97);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  .main-nav-list {
    flex-direction: column;
    gap: 4.8rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 2.4rem;
  }
}

/* ************************** */
/* BELOW 704px ( Smaller Tablets) */
/* ************************** */

@media (max-width: 43.1em) {
  .sticky-note {
    width: 17rem;
    height: 17rem;
    padding: 1.2rem;
  }

  .motto-heading {
    font-size: 3rem;
  }

  .btn,
  .btn:link,
  .btn:visited {
    font-size: 0.63rem;
    padding: 0.8rem 2.4rem;
  }

  .product-description {
    font-size: 0.65rem;
  }
}

/* ************************** */
/* BELOW 544px ( Phones) */
/* ************************** */

@media (max-width: 34em) {
  .grid--4-cols {
    grid-template-columns: 1fr 1fr;
  }

  .sticky-note {
    width: 13rem;
    height: 13rem;
    padding: 1.2rem;
  }

  .motto-heading {
    font-size: 2.2rem;
  }

  .btn--center {
    width: 8.7rem;
    font-size: 1rem;
    text-align: center;
  }

  .product-description {
    font-size: 1.2rem;
  }

  .section-playlist {
    padding: 2.4rem;
  }

  .playlist-heading {
    text-align: left;
    font-size: 3.6rem;
  }

  .playlist-description {
    font-size: 1.2rem;
  }

  .note {
    right: 10px;
  }

  .footer {
    margin-top: 9.6rem;
  }

  .footer-logo {
    height: 5rem;
    margin-left: -10px;
  }

  .footer-heading {
    font-size: 1.6rem;
  }

  .footer-link:link,
  .footer-link:visited {
    font-size: 0.8rem;
  }

  .copyright {
    font-size: 1rem;
  }
}
/* General */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  font-family: monospace;
  line-height: 1;
  font-weight: 400;
  overflow-x: hidden;
}

/* ************************** */
/* GENERAL REUSABLE COMPONENTS */
/* ************************** */

.container {
  /* 1140px */
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.grid {
  display: grid;
  column-gap: 2.4rem;
  row-gap: 2.4rem;
}

.grid--2-cols {
  grid-template-columns: 1fr 1fr;
}

.grid--3-cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4-cols {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.heading-primary {
  font-weight: 600;
  font-size: 5.2rem;
  margin-bottom: 3.2rem;
}

.heading-secondary {
  font-weight: 500;
  font-size: 3rem;
}

.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  text-decoration: none;
  font-size: 1.8rem;
  padding: 0.8rem 2.4rem;
  border-radius: 20px;
  border: 1.5px solid #000;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #fff;
  color: #000;
}

.btn:hover,
.btn:active {
  background-color: #c2c2c2;
  color: #fff;
}

/* HELPER/SETTINGS CLASSES */

.margin-left-md {
  margin-left: 3.2rem !important;
}

.margin-bottom-md {
  margin-bottom: 4.8rem !important;
}

/* ************************** */
/* Header*/
/* ************************** */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  height: 12.8rem;
  padding: 0 4.8rem;
  position: relative;
}

.logo {
  height: 12.8rem;
}

/* ************************** */
/* Header*/
/* ************************** */

.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4.8rem;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  text-decoration: none;
  color: #000;
  font-weight: 500;
  font-size: 1.8rem;
  transition: all 0.3s;
  cursor: pointer;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #333;
  cursor: pointer;
}

/* !!!! */
/* For Hamburger Menu*/
/* ********* */

.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #333;
}

.icon-mobile-nav[name="close-outline"] {
  display: none;
}

/* STICKY NAVIGATION */
.sticky .header {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  background-color: rgba(255, 255, 255, 0.97);
  z-index: 999;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
}

.sticky .section-hero {
  margin-top: 9.6rem;
}
/* ************************** */
/* Hero Section*/
/* ************************** */

.hero-section {
  position: relative;
  margin-bottom: 9.6rem;
  z-index: 0;
}

.hero-img {
  width: 100%;
}

.motto {
  position: absolute;
  top: 40%;
  right: 15%;
  transform: translate(0, -50%);
}

.sticky-note {
  background-color: #1809f2;
  width: 35rem;
  height: 35rem;
  text-align: left;
  padding: 2.4rem;
  margin-bottom: 1.6rem;
}

.motto-heading {
  font-size: 6.2rem;
  color: #fff;
}

.btn--center {
  position: absolute;
  right: 50%;
  transform: translate(50%, 0);
}

/* ************************** */
/* New Stock section*/
/* ************************** */

/* .sticky-flex {
  display: flex;
} */

.grid--2-cols-cus1 {
  grid-template-columns: 1fr 9fr;
}

.new-stock {
  padding: 1.6rem 0;
}

.new-sticky {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #1809f2;
  width: 14.2rem;
  height: 14.2rem;
  padding: 0.8rem;
  text-align: right;
}

.sticky-heading {
  color: #fff;
  font-size: 1.6rem;
}

.product img {
  width: 100%;
}

.product {
  position: relative;
  border: 1.5px solid #000;
}

.product::after {
  content: "New";
  position: absolute;
  top: 0;
  right: 0;

  font-size: 1.4rem;
  background-color: #1809f2;
  color: #fff;
  padding: 1.2rem 0.8rem;
}

.product-description {
  padding: 1.2rem;
  font-size: 1.2rem;
  line-height: 1.5;
}

.product-description p:nth-child(3) {
  margin-bottom: 0.8rem;
}

.btn--right {
  justify-self: end;
  grid-column: -2 / -1;
}

/* ************************** */
/* Playlist section*/
/* ************************** */

.grid--2-cols-cus2 {
  grid-template-columns: 70fr 30fr;
  column-gap: 6.4rem;
}

.section-playlist {
  padding: 4.8rem;
  background-color: #1809f2;
  margin-bottom: 9.6rem;
}

.playlist-img {
  width: 100%;
}

.playlist-list {
  text-align: center;
}

.playlist-description {
  color: #fff;
  font-size: 1.6rem;
}

.playlist-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.playlist-heading {
  color: #fff;
  font-size: 5.2rem;
}

.note {
  position: absolute;
  right: 45px;
}

/* ************************** */
/* Staff pick section*/
/* ************************** */

.product-staff img {
  width: 100%;
}

.product-staff,
.product {
  position: relative;
  border: 1.5px solid #000;
  transition: all 0.3s;
}

.product-staff:hover,
.product:hover,
.product-staff:active,
.product:active {
  transform: scale(1.1);
  cursor: pointer;
}

/* ************************** */
/* Footer*/
/* ************************** */

.footer {
  padding: 4.8rem 0;
  margin-top: 9.6rem;
  background-color: #c2c2c2;
  position: relative;
}

.grid--footer {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
}

.footer-logo {
  position: absolute;
  top: 0;
  left: 20px;
  height: 9.6rem;
}

.social-icon {
  height: 1.6rem;
  width: 1.6rem;
  position: absolute;
  right: 10px;
}

.copyright {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 1.4rem;
  line-height: 1.6;
}

.footer-heading {
  font-size: 2.4rem;
  font-weight: 500;
  margin-bottom: 3.2rem;
}

.margin-right {
  margin-left: -25px;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.2rem;
  color: #000;
  transition: all 0.3s;
  position: relative;
}

.footer-link:hover,
.footer-link:active {
  color: #333;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta
      name="description"
      content="Groovy is a store where you can spoil your record collecting hobby. Here you can find whatever record you are looking for"
    />

    <link rel="icon" href="img/favicon copy.png" />
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
    <link rel="manifest" href="manifest.webmanifest" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/general.css" />
    <link rel="stylesheet" href="css/queries.css" />

    
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
      integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <script
      defer
      src="https://unpkg.com/[email protected]/dist/smoothscroll.min.js"
    ></script>
    <script defer src="js/script.js"></script>

    <title>Groovy Records</title>
  </head>
  <body>
    <header class="header sticky">
      <a href="#">
        <img src="img/footer/logo.png" alt="Groovy logo" class="logo" />
      </a>

      <nav class="main-nav">
        <ul class="main-nav-list">
          <li><a href="#" class="main-nav-link">About</a></li>
          <li><a href="#" class="main-nav-link">Stocks</a></li>
          <li><a href="#" class="main-nav-link">Stores</a></li>
        </ul>
      </nav>

      <button class="btn-mobile-nav">
        <ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
        <ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
      </button>
    </header>

    <main>
      <section class="hero-section">
        <img
          src="img/Web_Home EmptyBG.webp"
          alt="background image"
          class="hero-img"
        />
        <div class="motto">
          <div class="sticky-note">
            <span class="motto-heading">Spinning</span>
            <span class="motto-heading">Memories</span>
            <span class="motto-heading">Since &#9834;</span>
            <span class="motto-heading">&horbar;&horbar;&horbar; 2010 </span>
          </div>
          <a href="#" class="hero-btn btn btn--center">Our Story</a>
        </div>
      </section>

      <section class="new-stock">
        <div class="record container grid grid--2-cols-cus1 margin-bottom-md">
          <div class="new-sticky">
            <h1 class="heading-secondary sticky-heading">New In Stock</h1>
          </div>

          <div class="grid grid--4-cols">
            <div class="product">
              <img
                src="img/New In Stocks/LoyleCarner-NotWavingButDrowning-3000x3000.jpg"
                alt="loyle-carner"
              />
              <div class="product-description">
                <p>Not Waving, But Drowning</p>
                <p>Loyle Carner</p>
                <p>2019</p>
                <p>Hip Hop music</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/Frank-Ocean-Blond.jpg"
                alt="Frank ocean"
              />
              <div class="product-description">
                <p>Blonde</p>
                <p>Frank Ocean</p>
                <p>2016</p>
                <p>R&B/Soul</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/Arlo-Parks.jpg.webp"
                alt="Arlo-Parks"
              />
              <div class="product-description">
                <p>Collapsed in Sunbeams</p>
                <p>Arlo Parks</p>
                <p>2021</p>
                <p>R&B/Soul, Alternative/Indie</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/kings.jpeg"
                alt="kings-of-convenience"
              />
              <div class="product-description">
                <p>Declaration of Dependence</p>
                <p>Kings of Convenience</p>
                <p>2009</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img src="img/New In Stocks/billie.jpeg" alt="billie-holiday" />
              <div class="product-description">
                <p>Strange Fruit</p>
                <p>Billie Holiday</p>
                <p>1972</p>
                <p>Jazz</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img src="img/New In Stocks/fkj.jpeg" alt="Fkj" />
              <div class="product-description">
                <p>French Kiwi Juice</p>
                <p>FKJ</p>
                <p>2017</p>
                <p>Funk/Soul</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/tyler.jpeg"
                alt=" Tyler, The creator"
              />
              <div class="product-description">
                <p>Call Me If You Get Lost</p>
                <p>Tyler, The Creator</p>
                <p>2021</p>
                <p>Hip Hop/ Rap</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/francoise.jpg"
                alt="Francoise hardy"
              />
              <div class="product-description">
                <p>Tous les garçons et filles</p>
                <p>Françoise Hardy</p>
                <p>1962</p>
                <p>Soul</p>
                <p>$50.00</p>
              </div>
            </div>
          </div>
          <a href="#" class="btn btn--right">All Stocks</a>
        </div>
      </section>

      <section class="section-playlist">
        <div class="playlist container grid grid--2-cols-cus2">
          <div class="grid grid--3-cols">
            <div class="playlist-list">
              <img
                src="img/playlist/Playlist_Krulism.png"
                alt="Playlist_Krulism"
                class="playlist-img"
              />
              <p class="playlist-description">
                A playlist intended for lifetime dedicated music enthusiast
              </p>
            </div>
            <div class="playlist-list">
              <img
                src="img/playlist/Playlist_Trip The Light.png"
                alt="Playlist_Trip"
                class="playlist-img"
              />
              <p class="playlist-description">
                A playlist intended for lifetime dedicated music enthusiast
              </p>
            </div>
            <div class="playlist-list">
              <img
                src="img/playlist/Playlist_Jazz.png"
                alt="Playlist_Jazz"
                class="playlist-img"
              />
              <p class="playlist-description">
                A playlist intended for lifetime dedicated music enthusiast
              </p>
            </div>
          </div>

          <div class="playlist-container">
            <span class="playlist-heading"
              >Curated Playlists to Jam Into
              <span class="note">&#9834;&#9834;</span>
            </span>
          </div>
        </div>
      </section>

      <section class="staff-pick">
        <div class="record container grid grid--2-cols-cus1 margin-bottom-md">
          <div class="new-sticky">
            <h1 class="heading-secondary sticky-heading">Staff's Picks</h1>
          </div>

          <div class="grid grid--4-cols">
            <div class="product-staff">
              <img src="img/staff's pick/chet.jpg" alt="Chet Baker" />
              <div class="product-description">
                <p>Chet Baker Sings</p>
                <p>Chet Baker</p>
                <p>1954</p>
                <p>Jazz</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img src="img/staff's pick/macmiller.jpg" alt="Mac Miller" />
              <div class="product-description">
                <p>Circles</p>
                <p>Mac Miller</p>
                <p>2020</p>
                <p>Hip Hop, Punk, Emo Rap</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img src="img/staff's pick/mazzy.jpg" alt="Mazzy Star" />
              <div class="product-description">
                <p>So Tonight That I Might See</p>
                <p>Mazzy Star</p>
                <p>1993</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img src="img/staff's pick/sade.jpg" alt="Sade adu" />
              <div class="product-description">
                <p>The Best of Sade</p>
                <p>Sade</p>
                <p>1994</p>
                <p>Jazz, Soul, R&B</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img
                src="img/staff's pick/beach house.jpg.webp"
                alt="Beach House"
              />
              <div class="product-description">
                <p>Depression Cherry</p>
                <p>Beach House</p>
                <p>2015</p>
                <p>Dream Pop, Indie Rock</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img src="img/staff's pick/archy.jpg" alt="Archy Marshall" />
              <div class="product-description">
                <p>A New Place 2 Drown</p>
                <p>King Krule</p>
                <p>2015</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img
                src="img/staff's pick/kingkrule.jpg.webp"
                alt=" King Krule"
              />
              <div class="product-description">
                <p>6 Feet Beneath The Moon</p>
                <p>King Krule</p>
                <p>2013</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img
                src="img/staff's pick/the-ooz.jpg.webp"
                alt="King Krule - The Ooz"
              />
              <div class="product-description">
                <p>The Ooz</p>
                <p>King Krule</p>
                <p>2017</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="logo-col">
        <a href="#" class="container-rel">
          <img
            src="img/footer/logo.png"
            alt="Groovy logo"
            class="footer-logo"
          />
        </a>
      </div>
      <div class="container grid grid--footer margin-bottom-md">
        <nav class="nav-col">
          <p class="footer-heading">Quick Links</p>
          <ul class="footer-nav">
            <li><a href="#" class="footer-link">Home</a></li>
            <li><a href="#" class="footer-link">About</a></li>
            <li><a href="#" class="footer-link">Stocks</a></li>
            <li><a href="#" class="footer-link">Stores</a></li>
            <li><a href="#" class="footer-link">Wishlist</a></li>
          </ul>
        </nav>

        <nav class="nav-col">
          <p class="footer-heading margin-right">Contact</p>
          <ul class="footer-nav">
            <li>
              <a href="#" class="footer-link"
                ><ion-icon name="logo-whatsapp" class="social-icon"></ion-icon
              ></a>
              <a href="#" class="footer-link">&#40;&#43;65&#41;22457889</a>
            </li>
            <li>
              <a href="#" class="footer-link"
                ><ion-icon name="logo-instagram" class="social-icon"></ion-icon
              ></a>
              <a href="#" class="footer-link">groovy.records</a>
            </li>
            <li>
              <a href="#" class="footer-link"
                ><ion-icon name="logo-facebook" class="social-icon"></ion-icon
              ></a>
              <a href="#" class="footer-link">groovy_records</a>
            </li>
            <li>
              <a href="#" class="footer-link"
                ><ion-icon name="mail-outline" class="social-icon"></ion-icon
              ></a>
              <a href="#" class="footer-link">[email protected]</a>
            </li>
          </ul>
        </nav>
      </div>
      <p class="copyright">
        &copy; <span class="year">2023</span> Groovy Records. All rights
        reserved.
      </p>
    </footer>
    <script
      type="module"
      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>

我是 css 和 html 新手。我目前正在尝试解决这个问题，当网站在移动设备上运行时，我的汉堡菜单（导航栏）低于/溢出了另一个元素Here is the example。 My goal is to make the navbar stacking on top of the other elements like this。我尝试在导航栏上使用 z-index 但它不起作用。请问哪位大佬知道解决办法请告诉我，谢谢

我尝试更改z-index的值，更改overflow属性的值并在google上寻找答案

css navbar z-index
2个回答
0
投票

我想我发现了错误。 它在线 

456
的 css 文件

  /* STICKY NAVIGATION */
  .sticky .header {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 8rem;
    padding-top: 0;
    padding-bottom: 0;
    background-color: rgba(255, 255, 255, 0.97);
    z-index: 999;
    box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
  }

应该是：

  /* STICKY NAVIGATION */
  .sticky.header {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 8rem;
    padding-top: 0;
    padding-bottom: 0;
    background-color: rgba(255, 255, 255, 0.97);
    z-index: 999;
    box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
  }

您错误地使用了选择器，请将其从 

.sticky .header
更改为 
.sticky.header

因此，当您放置所有 z 索引和其他内容时，它实际上从未应用于该元素。

0
投票

使用更高的 z-index。我认为应该有效。

.header {
  z-index: 1000;
  /* ... other styles ... */
}

.nav-open .main-nav {
  z-index: 999;
  /* ... other styles ... */
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.