在縮略圖圖像上顯示一個按鈕

Question

我試圖在縮略圖圖像上放置一個按鈕，但在圖像後面的標題區域添加了該按鈕。 下面是代碼：

<div class="thumbnail"> 
    <img class="img-responsive"alt="300x200" src="network_sec.jpg"> 
    <button class="btn btn-default btn-warning pull-right"><span class="glyphicon glyphicon-user"></span> 10</button> 

    <div class="caption"> 
     <h3 align="center">Network Security</h3> 
     <br> 
     <p> 
     <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-wrench"></span> Manage</button> 
      <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-eye-open"></span> Preview</button> 
      <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-pencil"></span> Edit Info</button> 
     </p> 
    </div> 
</div> 

我想在圖像的右下部分對齊按鈕。關於如何達到預期結果的任何建議？

Answer 1

我會把圖像放在一個新的div的按鈕，然後使用定位相對和絕對像這樣。

HTML

<div class="thumbnail"> 
    <div id="thumb"> 
    <img class="img-responsive"alt="300x200" src="network_sec.jpg"> 
    <button class="btn btn-default btn-warning pull-right"><span class="glyphicon glyphicon-user"></span> 10</button> 
    </div> 
    <div class="caption"> 
    <h3 align="center">Network Security</h3> 
    <br> 
    <p> 

    <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-wrench"></span> Manage</button> 
    <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-eye-open"></span> Preview</button> 
    <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-pencil"></span> Edit Info</button> 
</p> 

</div> 
</div> 

CSS

#thumb 
{ 
    position: relative; 
    width: 300px; 
    height: 200px; 
} 

#thumb img 
{ 
    z-index: 1; 
    position: absolute; 
    width: 300px; 
    height:200px; 
    top: 0; 
    left: 0; 

} 
#thumb button 
{ 
    z-index: 5; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

是你腦子裏想的是什麼？