Bagaimana untuk meletakkan kandungan dropdown di atas menggunakan z-index?

Question

Elemen div lungsur turun yang sepatutnya berfungsi seperti ini dalam paparan mudah alih, tetapi muncul sebagai paparan mudah alih dalam elemen periksa.

Saya telah cuba menukar penggayaan CSS z-index bagi hampir semua elemen navigasi yang berkaitan untuk mengekalkan elemen ini pada "z-index:121212 !important;", tetapi div lungsur turun masih muncul di belakang semua pautan navigasi lain.

Adakah sesiapa tahu mengapa ini berlaku? Sebarang bantuan amatlah dihargai.

Ini ialah kod HTML saya dan CSSnya:

 .navbar-mobile .dropdown>.dropdown-active {
    paparan: blok;
    z-indeks: 121212;
  }
  .dropdown-content {
    paparan: tiada;
    jawatan: mutlak;
    warna latar belakang: var(--bg-dark);
    lebar min: 200px;
    bayang-kotak: 0px 10px 10px 0px rgba(0,0,0,0.2);
    indeks z: 101000;
    animasi: marketNav 0.5s;
  }
  .dropdown-content a {
    warna: #fff;
    padding: 12px 16px;
    hiasan teks: tiada;
    paparan: blok;
  }
  .dropdown-content a:hover{
    warna latar belakang: var(--warna-utama);
    warna: #000 !penting;
  }
  .dropdown-content a:hover{
    warna: #1F586B;
  }
  .dropdown:hover .dropdown-content{
    paparan: inline-block;
  }
  .nav-pills.has-two .nav-item .nav-link.active {
    warna latar belakang: var(--warna-utama);
    warna: #000;
  }
  .nav-link{
    berat fon: 600 !penting;
    jarak huruf: 0.8px;
  }
  @skrin media dan (lebar min: 1024px) {

    .pautan sokongan{
      margin-kanan: 10px!penting;
    }
    .nav-link{
      padding-left: 25px!penting;
    }
  }
  .nav-pills.has-two .nav-item .nav-link {
    warna latar belakang: #000 !penting;
    warna: #fff;
    jejari sempadan: 0;
    -jejari-sempadan-webkit: 0;
    -jejari-sempadan-moz: 0;
    -ms-border-radius: 0;
    -o-sempadan-jejari: 0;
    padding: 12px 20px;
  }

<!-- Navigasi -->
    <header id="header" class="fixed-top ">
        <div class="container d-flex align-item-center justify-content-lg-between">
            <div class="logo me-auto me-lg-0">
                <a href="index.htm">

                    <span>
                        <img class="img-fluid rounded sm-device-img text-align" src="asset/theme1/images/logo/logo.svg" width="100%" alt="pp">
                    </span>
                </a>
            </div>
            <nav id="navbar" class="navbar order-last order-lg-0">
                <ul>
                    <li class="aktif">
                        <a class="nav-link" href="index.htm">Home</a>
                    </li>

                    <li class="nav-item">
                        <div class="dropdown">
                            <a class="dropbtn nav-link">Market</a>
                            <div class="dropdown-content">

                                <a href="">Forex</a>
                                <a href="">Mata Wang Kripto</a>
                                <a href="">Indeks</a>
                                <a href="">Stok</a>
                                <a href="">Komoditi</a>

                            </div>
                        </div>
                        <div class="mobile-view marketNav">
                            <a href="">Forex</a>
                            <a href="">Mata Wang Kripto</a>
                            <a href="">Indeks</a>
                            <a href="">Stok</a>
                            <a href="">Komoditi</a>
                        </div>
                    </li>

                    <li class="nav-item">
                        <div class="dropdown">
                            <a class="dropbtn nav-link">Trading</a>
                            <div class="dropdown-content">

                                <a href="">Platform Perdagangan</a>
                                <a href="">Alat</a>
                                <a href="">Pendidikan</a>
                                <a href="">faedah</a>
    
                            </div>
                        </div>
                        <div class="mobile-view marketNav">

                            <a class="sub-nav-link" href="">Platform Perdagangan</a>
                            <a class="sub-nav-link" href="">Alat</a>
                            <a class="sub-nav-link" href="">Pendidikan</a>
                            <a class="sub-nav-link" href="">faedah</a>

                        </div>
                    </li>
    
                    <li>
                        <a class="nav-link" href="">Jenis Akaun</a>
                    </li>
                    <li>
                        <a class="nav-link" href="">Mengenai</a>
                    </li>
                    <li>
                        <a class="nav-link" href="">Hubungi</a>
                    </li>
                    <li class="d-md-block d-lg-none d-block ">
                        <a class="nav-link" href="">Log masuk</a>
                        <a class="btn-border-inverse col-12 btn-sm me-3" href="">Daftar</a>
                    </li>
                    
                </ul>
                <i class="bi-list mobile-nav-toggle"></i>
            </nav>
            <div class="header-right d-flex d-none d-md-none d-lg-block">
                <a href="" class="btn-border btn-sm me-3">Log masuk</a>
                <a href="" class="btn-border-inverse btn-sm me-3">Daftar</a>


            </div>
        </div>
    </header>
<!-- Navigasi Tamat -->

编辑：我找到了解决这个问题的方法。当链接位于主要到了解决这个问题的方法。当链接位于主要到了解决这个问题的方法。当链接位于主要接位于主要吗时客的”后无颢被点击。所以我添加了一些高度的空白div，以出现在下拉式内容将出现的nav-link下方，仟助一些JS和CSS使其在较大的屏幕丏王上。击“dropdown-content”中的链接了。

Answer 1

Masalahnya bukan indeks-z, tetapi warna latar belakang. Ia lutsinar jadi nampaknya berada di belakang teks lain. Anda harus menetapkan pembolehubah yang anda gunakan dalam kod anda:

:root {
  --bg-dark: #000;
  --main-color: #fff;
}