Displaying a button on top of thumbnail image - html

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?