Comment mettre le contenu déroulant en haut à l'aide de z-index ?

Question

Un élément div déroulant qui devrait fonctionner comme ceci en vue mobile, mais apparaît en vue mobile dans l'élément inspect.

J'ai essayé de modifier le style CSS z-index de presque tous les éléments de navigation associés pour conserver cet élément à "z-index:121212 !important;", mais le div déroulant apparaît toujours derrière tous les autres liens de navigation.

Est-ce que quelqu'un sait pourquoi cela se produit ? Toute aide serait grandement appréciée.

Voici mon code HTML et son CSS :

 .navbar-mobile .dropdown>.dropdown-active {
    bloc de visualisation;
    indice z : 121212 ;
  }
  .dropdown-contenu {
    affichage : aucun ;
    position : absolue ;
    couleur d'arrière-plan : var(--bg-dark);
    largeur minimale : 200 px ;
    ombre de la boîte : 0px 10px 10px 0px rgba(0,0,0,0.2);
    indice z : 101 000 ;
    animation : marketNav 0,5 s ;
  }
  .dropdown-content un {
    couleur : #fff ;
    remplissage : 12px 16px ;
    décoration de texte : aucune ;
    bloc de visualisation;
  }
  .dropdown-content a:hover{
    couleur d'arrière-plan : var(--couleur-main);
    couleur : #000 !important;
  }
  .dropdown-content a:hover{
    couleur : #1F586B ;
  }
  .dropdown : survolez .dropdown-content{
    affichage : bloc en ligne ;
  }
  .nav-pills.has-two .nav-item .nav-link.active {
    couleur d'arrière-plan : var(--couleur-main);
    couleur : #000 ;
  }
  .nav-lien{
    poids de la police : 600 !important ;
    espacement des lettres : 0,8 px ;
  }
  Écran @media et (largeur minimale : 1 024 px) {

    .support-lien{
      marge droite : 10px ! important ;
    }
    .nav-lien{
      padding-left : 25px !important ;
    }
  }
  .nav-pills.has-two .nav-item .nav-link {
    couleur d'arrière-plan : #000 !important ;
    couleur : #fff ;
    rayon de bordure : 0 ;
    -webkit-border-radius : 0 ;
    -moz-border-rayon : 0 ;
    -ms-border-radius : 0 ;
    -o-border-rayon : 0 ;
    remplissage : 12px 20px ;
  }</pré>
<pre class="brush:html;toolbar:false;"><!-- Navigation -->
    <header id="header" class="fixed-top ">
        <div class="conteneur d-flex align-items-center justifier-content-lg-between">
            <div class="logo me-auto me-lg-0">
                <a href="index.htm">

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

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

                                <a href="">Forex</a>
                                <a href="">Crypto-monnaies</a>
                                <a href="">Indices</a>
                                <a href="">Actions</a>
                                <a href="">Marchandises</a>

                            </div>
                        </div>
                        <div class="mobile-view marketNav">
                            <a href="">Forex</a>
                            <a href="">Crypto-monnaies</a>
                            <a href="">Indices</a>
                            <a href="">Actions</a>
                            <a href="">Marchandises</a>
                        </div>
                    ≪/li>

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

                                <a href="">Plateformes de trading</a>
                                <a href="">Outils</a>
                                <a href="">Éducation</a>
                                <a href="">avantages</a>
    
                            </div>
                        </div>
                        <div class="mobile-view marketNav">

                            <a class="sub-nav-link" href="">Plateformes de trading</a>
                            <a class="sub-nav-link" href="">Outils</a>
                            <a class="sub-nav-link" href="">Éducation</a>
                            <a class="sub-nav-link" href="">avantages</a>

                        </div>
                    ≪/li>
    
                    <li>
                        <a class="nav-link" href="">Types de compte</a>
                    ≪/li>
                    <li>
                        <a class="nav-link" href="">À propos</a>
                    ≪/li>
                    <li>
                        <a class="nav-link" href="">Contact</a>
                    ≪/li>
                    <li class="d-md-block d-lg-none d-block ">
                        <a class="nav-link" href="">Connexion</a>
                        <a class="btn-border-inverse col-12 btn-sm me-3" href="">S'inscrire</a>
                    ≪/li>
                    
                </ul>
                <i class="bi-list mobile-nav-toggle"></i>
            </nav>
            <div class="en-tête-droit d-flex d-none d-md-none d-lg-block">
                <a href="" class="btn-border btn-sm me-3">Connexion</a>
                <a href="" class="btn-border-inverse btn-sm me-3">S'inscrire</a>


            </div>
        </div>
    </en-tête>
<!-- Fin de la navigation -->

编辑：法被点击。所以我添加了一些高度的空白div, il s'agit d'un lien nav-link, d'un JS et d'un CSS.点击« dropdown-content »中的链接了。

Answer 1

Le problème n'est pas l'index z, mais la couleur d'arrière-plan. Il est transparent et semble donc se trouver derrière un autre texte. Vous devez définir les variables que vous utilisez dans votre code :

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