html - 导航栏显示在图像上方，绝对无法破坏绝对的 html css

Question

我试图将导航栏保持在具有位置相对和绝对条件的 div 下方，但是当我试图将导航栏保持在 image3.png 下方时，它位于 image3.png 上方，位于作业标题下方，我怎样才能使导航条出现像往常一样在图像下方。这是截图 http://imgur.com/a/nNbCZ

这是我的代码

 .clsFirstImg {
               position: relative;
               top: 0;
               left: 0;
               margin:0 auto;
               z-index: 10;
           }
         .clsSecondImg {
               width:15%;
               position: absolute;
               top: 10%;
               left: 40%;
               z-index:100
            }
         .clsThirdImg {
               width:85.4%;
               position: absolute;
               top: 23.5%;
                 left:7.3%
                }
           .heading
            {
               position: absolute;
               top: 30%;
               left:40%;
               z-index:200;
             }


<div>

 <img src="image1.png" class="img-responsive clsFirstImg">
    <a href="#"><img src="image2.png" class="img-responsive clsSecondImg"></a>
      <a href="#" style="color:white"><h1 class="heading">jobs</h1></a>
     <a href="#"><img src="image3.png" class="img-responsive clsThirdImg"></a>

 </div>


<center>

<!---navbar start--->
<nav class="navbar navbar-default">
     <div class="container">
         <ul class="nav navbar-nav">
             <li><a href="#">Home</a></li>
             <li><a href="#">Page 1</a></li>
             <li><a href="#">Page 2</a></li>
             <li><a href="#">Page 3</a></li>
           </ul>
       </div>
    </nav>

  <!---navbar end--->
  </center>

Answer 1

这就是我能做的，记住一件事，这是静态的，如果你想要这个响应，那么你必须使用 container>row>col-，我想你知道..

*{
 margin: 0 auto;
}
body{
 background: url(bg.jpg);
}
.clsFirstImg{
position: relative;
z-index: 111;
}
.clsSecondImg{
position: relative;
margin-top: -180px;
z-index: 222;
}
.clsThirdImg{
position: relative;
z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <img src="images1.png" class="img-responsive clsFirstImg">
  <a href="#"><img src="images2.png" class="img-responsive clsSecondImg"></a>
  <img src="images3.png" class="img-responsive clsThirdImg">

</div>


<center>
  <!---navbar start--->
  <nav class="navbar navbar-default">
    <div class="container">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </nav>

  <!---navbar end--->
</center>