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

Question

I'm trying to place a button on top of a thumbnail image but the button is added after the image, in the caption area. Here is the code:

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

I'm trying to align the button at the bottom right part of the image. Any suggestions on how can I achieve the desired result?

Answer 1

I would put the image an the button in a new div, then use positioning relative and absolute like this.

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

Is that what you had in mind?