html 链接呈现在页面上，但行为就像它不存在一样

Question

我有用Bootstrap 3.3.5制作的导航栏，最左边有navbar-brand锚元素：这是带代码的代码笔，这是整页视图。

---

问题如下：

这个链接元素<a href='#' class='navbar-brand'>Symphony</a>被渲染了，我可以看到它，但它的行为，就像什么都没有一样。我无法点击链接，甚至无法选择其中的文本。

关于实际问题可能是什么，有什么想法吗？有没有可能是某些CSS以某种方式隐式地破坏了链接，或者jQuery代码做错了什么？

更新

如果我的样式表

a.navbar-brand {
  z-index: 0/-9999/9999 !important;
}

Answer 1

将以下代码添加到.navbar-brand中，请参阅。

position: relative;
z-index: 1;

这是因为该元素与.nav-bar重叠。如果你增加z-index，它会很好地工作，为此，我们应该将该元素的position: static更改为其他位置值。在您的情况下，position: relative将起作用。

Answer 2

Masoom的答案是正确的

如果你不想改变css，那么改变这个的位置<a href='#' class='navbar-brand'>Symphony</a>像这个

<div class="main-navbar">
<nav class="navbar navbar-default">
<div class="navbar-header">
    <button class="navbar-toggle" type="button" data-toggle="collapse"    data-target="js-navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
   </button>
</div>

<!--"Browse the Store" DROPDOWN -->
<div class="collapse navbar-collapse js-navbar-collapse">
  <ul class="nav navbar-nav">
    <a href="https://google.com" class="navbar-brand">Symphony</a>
    <li class="dropdown mega-dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Browse The Store<span class="glyphicon glyphicon-chevron-down"></span></a>
      <ul class="dropdown-menu mega-dropdown-menu row">
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">New in Symphony</li>
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
              </div>
              <!-- End Carousel Inner -->
            </div>
            <!-- /.carousel -->
            <li class="divider"></li>
            <li><a href="#">View all Instruments <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Violins</li>
            <li class="divider"></li>
            <li class="dropdown-header">Pianos</li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Guitars</li>
            <li class="divider"></li>
            <li class="dropdown-header">Saxophones</li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Support</li>
            <li><a href="#">About</a></li>
            <li><a href="#">Delivery Info</a></li>
            <li><a href="#">FAQ &amp; Help</a></li>
            <li><a href="#">Contacts</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Newsletter</li>
            <form class="form" role="form">
              <div class="form-group">
                <label class="sr-only" for="email">Email address</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email">
              </div>
              <button type="submit" class="btn btn-primary btn-block">Subscribe</button>
            </form>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <!--END "Browse the Store" DROPDOWN -->

  <!-- ========== (LOGIN) JOHN SMITH PROFILE ============= -->
  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">John Smith (₴560000)<span class="glyphicon glyphicon-chevron-down"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Profile</a></li>
        <li><a href="#">Shopping Cart (₴560000)</a></li>
        <li><a href="#">Settings</a></li>
        <li role="separator" class="divider"></li>
      </ul>
    </li>
  </ul>
  <!-- ========== END (LOGIN) JOHN SMITH PROFILE ============= -->

  <!-- ======= START SEARCH ========== -->
  <form class="navbar-form" role="search">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search">
      <span class="input-group-btn">
          <button type="reset" class="btn btn-default">
            <span class="glyphicon glyphicon-remove">
              <span class="sr-only">Close</span>
      </span>
      </button>
      <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-search">
              <span class="sr-only">Search</span>
        </span>
      </button>
      </span>
    </div>
  </form>
  <!-- === END SEARCH === -->

Answer 3

根据我的评论：

<div class="collapse navbar-collapse js-navbar-collapse">

正在将元素与a链接重叠。你可以重新组织html，这样就不会发生这种情况，或者这样做：

.nav-brand {
      position:relative;
      z-index:10;
 }

代码笔更新