html - 导航链接不适用于 z-index

Question

我在我的代码中使用 Bootstrap 作为 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>