suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

<p>Ein Dropdown-Div-Element, das in der mobilen Ansicht so funktionieren sollte, aber im Inspect-Element als mobile Ansicht angezeigt wird. </p> <p>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. </p> <p>Weiß jemand, warum das passiert? Jede Hilfe wäre sehr dankbar. </p> <p>Dies ist mein HTML-Code und sein CSS: </p> <p> <pre class="brush:css;toolbar:false;"> .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; }</pre> <pre class="brush:html;toolbar:false;"><!-- 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 --></pre> </p> <p><strong>编辑:</strong>被点击.所以我添加了一些高度的空白div Geben Sie „dropdown-content“ ein.</p>
P粉986860950P粉986860950486 Tage vor523

Antworte allen(1)Ich werde antworten

  • P粉982881583

    P粉9828815832023-09-01 10:54:38

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

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

    Antwort
    0
  • StornierenAntwort