How to put dropdown content on top using z-index?

Question

A dropdown div element that should work like this in mobile view, but appears as mobile view in the inspect element.

I've tried changing the CSS z-index styling of almost all related navigation elements to keep this element at "z-index:121212 !important;", but the dropdown div still appears behind all other navigation links.

Does anyone know why this is happening? Any help would be greatly appreciated.

This is my HTML code and its CSS:

 .navbar-mobile .dropdown>.dropdown-active {
    display: block;
    z-index: 121212;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--bg-dark);
    min-width: 200px;
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2);
    z-index: 101000;
    animation: marketNav 0.5s;
  }
  .dropdown-content a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  .dropdown-content a:hover{
    background-color: var(--main-color);
    color: #000 !important;
  }
  .dropdown-content a:hover{
    color: #1F586B;
  }
  .dropdown:hover .dropdown-content{
    display: inline-block;
  }
  .nav-pills.has-two .nav-item .nav-link.active {
    background-color: var(--main-color);
    color: #000;
  }
  .nav-link{
    font-weight: 600 !important;
    letter-spacing: 0.8px;
  }
  @media screen and (min-width: 1024px) {

    .support-link{
      margin-right: 10px!important;
    }
    .nav-link{
      padding-left: 25px!important;
    }
  }
  .nav-pills.has-two .nav-item .nav-link {
    background-color: #000 !important;
    color: #fff;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    padding: 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">

                    <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="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="">Cryptocurrencies</a>
                                <a href="">Indices</a>
                                <a href="">Stocks</a>
                                <a href="">Commodities</a>

                            </div>
                        </div>
                        <div class="mobile-view marketNav">
                            <a href="">Forex</a>
                            <a href="">Cryptocurrencies</a>
                            <a href="">Indices</a>
                            <a href="">Stocks</a>
                            <a href="">Commodities</a>
                        </div>
                    </li>

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

                                <a href="">Trading Platforms</a>
                                <a href="">Tools</a>
                                <a href="">Education</a>
                                <a href="">benefits</a>
    
                            </div>
                        </div>
                        <div class="mobile-view marketNav">

                            <a class="sub-nav-link" href="">Trading Platforms</a>
                            <a class="sub-nav-link" href="">Tools</a>
                            <a class="sub-nav-link" href="">Education</a>
                            <a class="sub-nav-link" href="">benefits</a>

                        </div>
                    </li>
    
                    <li>
                        <a class="nav-link" href="">Account Types</a>
                    </li>
                    <li>
                        <a class="nav-link" href="">About</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="">Login</a>
                        <a class="btn-border-inverse col-12 btn-sm me-3" href="">Register</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">Login</a>
                <a href="" class="btn-border-inverse btn-sm me-3">Register</a>


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

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

Answer 1

The problem is not the z-index, but the background color. It's transparent so it appears to be behind other text. You should set the variables you use in your code:

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