Question

如何使图像与下方的导航栏（nav-pills）重叠？
这里是指向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

Answer 2

您需要对图像标记使用绝对位置，并在顶部添加z-index：1的任何组件

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

我认为这对您进行模拟检查http://jsfiddle.net/5Ledeorr/5/

非常有用

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

2 个答案: