Little Number above image

[DrTrans]

I want to do something like this: 

 

http://gyazo.com/dfee0f77931b6041f6b13ec8aee0effd

 

How do i get the number on top of the image. my code looks like this: 

 

 

 
<a href="#" class="dropdown-toggle pull-right" data-toggle="dropdown"><img src="iconset/allfriends.png" class="headicon img-circle"><div class"littleNumber"><?php echo $amount; ?><b class="caret"></b></a>
                
 

[DrTrans]

 

.littleNumber {

position: fixed;

font-size: 9px; 

color: white; 

font-weight: bold;  

display: inline-block; 

background: red; 

top: 3px;

padding-left: 3px; 

padding-right: 3px; 

-moz-border-radius:1px 1px 0px 0px;

-webkit-border-radius:1px 1px 0px 0px;

-khtml-border-radius:1px 1px 0px 0px;

border-radius:1px 1px 0px 0px; 

}

 

Edited December 2, 2013 by DrTrans

[kicken]

You need to give the parent <a> tag position: relative so that it becomes a new positioning context. Then you can give the number position: absolute and set it's position as desired.