导航链接不适用于z-index

Question

我在我的代码中使用bootstraps作为CSS。 我需要在导航栏上放置图片...但是如果我尝试z-index我的链接将不起作用，则将导航栏的z-index尝试为0，导航栏会覆盖图像，并尝试-1可以正常工作，但禁用链接

以下是我的代码：

<div class="container " style="width:30%;float:left;">

<img class="brand" src="img.png" style="z-index:2;" />
 </div>
 <div class="navbar navbar-inverse navbar-fixed-top " style="z-index:-1;" >
<div class="container"style="width:50%;">
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">

    <li class="active"><a href=href="#">One</a></li>    
    <li class="active"><a href="#">Two</a></li>
    <li class="active"><a href="#">Three</a></li>
    <li class="active"><a href="#">Four</a></li>    
   </ul>
 </div>

Answer 1

如下所述更新您的HTML：

<div class="container " style="width:30%;float:left;z-index:0;">

<img class="brand" src="http://images.tentebranda.org/wp-content/uploads/photo-background-images_8713_1.jpg"  />
 </div>
 <div class="navbar navbar-inverse navbar-fixed-top " style="z-index:1;" >
<div class="container"style="width:50%;">
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="active"><a href=href="#">One</a></li>    
    <li class="active"><a href="#">Two</a></li>
    <li class="active"><a href="#">Three</a></li>
    <li class="active"><a href="#">Four</a></li>    
  </ul>
</div>