html - 如何使图像与导航丸重叠？

Question

如何让图片与下方的导航栏(nav-pills)重叠？
这里是fiddle的链接http://jsfiddle.net/arpittomar/5Ledeorr/
总结:

  <div class="container">
  <div class="row" id="overlap">
    <div class="col-md-10 col-md-offset-1">
      <img src="http://placehold.it/200x100" class="img-thumbnail">
    </div>
  </div>
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="internal_navbar">
        <ul class="nav nav-pills">
          <li><a href="#">Timeline</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Friends</a></li>
          <li><a href="#">Photos</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

这里我想让图像重叠在它下面的 ul 元素上。

Answer 1

您可以使用 position: absolute对于 <ul>和 <img>和 z-index: 1对于 <img> :

.nav-pills, .img-thumbnail {
  position: absolute;
}

.img-thumbnail {
  z-index: 1;
}

JSFiddle