Невозможно нажать на ссылки на панели навигации.

Question

Я могу щелкнуть по всем другим ссылкам на странице, включая list-group (когда они у меня есть), и получить доступ ко всем путям из моего проекта (когда я получаю прямой доступ к ним по URL-адресу, указанному в моем приложении), но ни одной из ссылок в навигационной панели доступны прямо сейчас.

Ниже кода:

    .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>

Я почти уверен, что проблема связана с моими настройками z-index, потому что проблема начинается, когда я добавляю это. Мне нужно это, чтобы держать панель навигации позади list-group, но без того, чтобы сделать ссылки в панели навигации недоступными.

Answer 1

In, потому что сохранили z-index = -1, потому что если это, то он становится сложен ниже по сравнению с другим элементом. Либо удалите его, либо сделайте его больше или равным нулю.