Unable to click on the links on a navbar

问题

I can click all other links in the page, including in the list-group (when I have any), and access all paths from my project (when I directly access them using the url mapped in my application), but none of the links in the navbar are acessible right now.

Below the code:

    .navbar {
      z-index: -1;
    }
    
    .list-group {
      margin-top: -128px;
      width: 180px;
    }
    
    li.list-group-item {
      padding: 0;
    }
    
    .media img {
      padding: 0;
    }
    
    .bd-placeholder-img {
      padding: 0;
    }

    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          
        </ul>
    
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="/login">Login</a>
          </li>
    
          <li class="nav-item">
            <a class="nav-link" href="/usuario/register">Cadastro</a>
          </li>
        </ul>
      </div>
    </nav>
    
    <main role="main" class="container-fluid">
    
      <div class="starter-template">
        <div class="row">
          <div class="col-2">
            
    <div class="list-group">
      <li class="list-group-item" href="/">
        <a href="/">
          <div class="media">
            
            <svg class="bd-placeholder-img" width="180px" height="360px" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#868e96"></rect>
              <text x="50%" y="50%" fill="#dee2e6" dy=".3em">...</text>
            </svg>
          </div>
        </a>
      </li>
    </div>
    
          </div>
          <div class="col-10">
            <div>
            </div>
          </div>
        </div>
      </div>
    
    </main>

I am pretty sure the problem is with my z-index settings, because the issue start when I add that. I need this to keep the navbar behind the list-group, but without make the links in the navbar unavailable.

回答1:

In is because have kept z-index=-1, because if that it is getting stacked lower compared to other element. Either remove it or make it greater than or equal to zero.

来源：https://stackoverflow.com/questions/61311574/unable-to-click-on-the-links-on-a-navbar