如何使圖像與nav-pills重疊？

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> 

在這裏，我想使圖像重疊在它下面的UI元素。

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指數：1對它

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

I th墨水這將爲您的演示檢查工作http://jsfiddle.net/5Ledeorr/5/