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>

导航链接不适用于z-index

1 个答案: