Adding number label on top of an image - html

Question

EDIT
I've added this css to span.label using this fiddle
span.label{
width:100px; color:#FFFFFF;
background-color:#F43B05;
float:right; padding:3px;
position:absolute; top:50px; left:5px;
}
And I've got this:
I need to put a label on an image using bootstrap.
I have this image with a label:
And here is the code for it:
<span class="label label-success">4</span>
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button"/>
<div title="3rd Molar - Upper Rigth Jaw" id="div_one" class="collapse"><?php echo $resTeeth['one'] ?>
</div>
But this is not what I want. What I want is to add this number 4 green label on top of the image and not on the side of it.
I tried this:
<span class="label label-danger">4
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button"/>
<div title="3rd Molar - Upper Rigth Jaw" id="div_one" class="collapse"><?php echo $resTeeth['one'] ?>
</div>
</span>
And I've got this:

Answer 1

I am sure this will be your answer.
Thanks
/* CSS used here will be applied after bootstrap.css */
.badge-notify{
background-color:red !important;
position:relative;
top: -20px;
left: -35px;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
<span class="glyphicon glyphicon-comment"></span>
</button>
<span class="badge badge-notify">3</span>
</div>

Answer 2

Just use float:left for span.label and then set margins to set the position of the label element.

Answer 3

try this:
<div class="container">
<img src="" />
<span class="lbl">something</span>
</div>
.container{
position:relative;
}
.container img, .container .lbl{
position:absolute;
top:0px;
left:0px;
}

Answer 4

I've made two examples here, like the ones I suggested in the comments.
JSFiddle
div
{
position: relative;
width: 300px;
height: 300px;
}
span
{
position: absolute;
background: red;
color: white;
height: 60px;
width: 60px;
text-align: center;
font-family: Tahoma, sans-serif;
font-size: 40px;
line-height: 55px;
border-radius: 10px;
bottom: 0;
right: 0;
}
.icon
{
position: relative;
}
.icon:after
{
content:"4";
position: absolute;
display: block;
background: red;
color: white;
height: 60px;
width: 60px;
text-align: center;
font-family: Tahoma, sans-serif;
font-size: 40px;
line-height: 55px;
border-radius: 10px;
bottom: 0;
right: 0;
}