html - 在缩略图图像顶部显示一个按钮

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

这是你的想法吗？