在缩略图图像上显示一个按钮

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; 
} 

是你脑子里想的是什么？