Wie platziere ich Dropdown-Inhalte mit Z-Index oben?

Question

Ein Dropdown-Div-Element, das in der mobilen Ansicht so funktionieren sollte, aber im Inspect-Element als mobile Ansicht angezeigt wird.

Ich habe versucht, den CSS-Z-Index-Stil fast aller zugehörigen Navigationselemente zu ändern, um dieses Element bei „z-index:121212 !important;“ zu belassen, aber das Dropdown-Div erscheint immer noch hinter allen anderen Navigationslinks.

Weiß jemand, warum das passiert? Jede Hilfe wäre sehr dankbar.

Dies ist mein HTML-Code und sein CSS:

 .navbar-mobile .dropdown>.dropdown-active {
    Bildschirmsperre;
    Z-Index: 121212;
  }
  .dropdown-content {
    Anzeige: keine;
    Position: absolut;
    Hintergrundfarbe: var(--bg-dark);
    Mindestbreite: 200 Pixel;
    Box-Shadow: 0px 10px 10px 0px rgba(0,0,0,0.2);
    Z-Index: 101000;
    Animation: MarketNav 0,5 s;
  }
  .dropdown-content a {
    Farbe: #fff;
    Polsterung: 12px 16px;
    Textdekoration: keine;
    Bildschirmsperre;
  }
  .dropdown-content a:hover{
    Hintergrundfarbe: var(--main-color);
    Farbe: #000 !important;
  }
  .dropdown-content a:hover{
    Farbe: #1F586B;
  }
  .dropdown:hover .dropdown-content{
    Anzeige: Inline-Block;
  }
  .nav-pills.has-two .nav-item .nav-link.active {
    Hintergrundfarbe: var(--main-color);
    Farbe: #000;
  }
  .nav-link{
    Schriftstärke: 600 !important;
    Buchstabenabstand: 0,8px;
  }
  @media screen und (min-width: 1024px) {

    .support-link{
      margin-right: 10px!important;
    }
    .nav-link{
      padding-left: 25px!important;
    }
  }
  .nav-pills.has-two .nav-item .nav-link {
    Hintergrundfarbe: #000 !important;
    Farbe: #fff;
    Randradius: 0;
    -webkit-grenzradius: 0;
    -moz-Grenzradius: 0;
    -ms-Grenzradius: 0;
    -o-Grenzradius: 0;
    Polsterung: 12px 20px;
  }

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

                    <spanne>
                        <img class="img-fluidrounded 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="active">
                        <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="">Kryptowährungen</a>
                                <a href="">Indizes</a>
                                <a href="">Aktien</a>
                                <a href="">Rohstoffe</a>

                            </div>
                        </div>
                        <div class="mobile-view marketNav">
                            <a href="">Forex</a>
                            <a href="">Kryptowährungen</a>
                            <a href="">Indizes</a>
                            <a href="">Aktien</a>
                            <a href="">Rohstoffe</a>
                        </div>
                    </li>

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

                                <a href="">Handelsplattformen</a>
                                <a href="">Tools</a>
                                <a href="">Bildung</a>
                                <a href="">Vorteile</a>
    
                            </div>
                        </div>
                        <div class="mobile-view marketNav">

                            <a class="sub-nav-link" href="">Handelsplattformen</a>
                            <a class="sub-nav-link" href="">Tools</a>
                            <a class="sub-nav-link" href="">Bildung</a>
                            <a class="sub-nav-link" href="">Vorteile</a>

                        </div>
                    </li>
    
                    <li>
                        <a class="nav-link" href="">Kontotypen</a>
                    </li>
                    <li>
                        <a class="nav-link" href="">Über</a>
                    </li>
                    <li>
                        <a class="nav-link" href="">Kontakt</a>
                    </li>
                    <li class="d-md-block d-lg-none d-block ">
                        <a class="nav-link" href="">Anmelden</a>
                        <a class="btn-border-inverse col-12 btn-sm me-3" href="">Registrieren</a>
                    </li>
                    
                </ul>
                <i class="bi 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">Anmelden</a>
                <a href="" class="btn-border-inverse btn-sm me-3">Registrieren</a>


            </div>
        </div>
    </header>
<!-- Navigation endet -->

编辑:被点击.所以我添加了一些高度的空白div Geben Sie „dropdown-content“ ein.

Answer 1

问题不在于 z-index，而在于背景颜色。它是透明的，所以看起来好像在其他文本的后面。你应该在代码中设置你使用的变量：

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