Align Span inside Div on top

Question

I want to align the red sticker on right hand side top of the div block . This is my progress http://jsfiddle.net/E2aWr/158/

html

<div class="block">
<a href="#"><img src="http://www.balloontothemoon.com/images/Bubbles.jpg">
<span class="red-sticker">1<p>2</p></span>
</a>
</div>

css

.red-sticker {
font-family: Arial,sans-serif;
position: absolute;
right: 0px;
top: 0px;
display: block;
width: 32px;
height: 32px;
padding-top: 5px;
font-size: 12px;
line-height: 12px;
text-align: center;
float: left;
color: #FFF;
border-radius: 50%;
background-color: #A50200;
background-image: linear-gradient(to bottom, #CB0400, #A50200);
}
p:last-child {
 margin-bottom: 0px;
}

Answer 1

Easy way.

.block{
     position:absolute;
}

.red-sticker {
    font-family: Arial,sans-serif;
    position: absolute;
    right: -10px;
    top: -10px;
    display: block;
    width: 32px;
    height: 32px;
    padding-top: 5px;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    float: left;
    color: #FFF;
    border-radius: 50%;
    background-color: #A50200;
    background-image: linear-gradient(to bottom, #CB0400, #A50200);
}

Here is the working example in jsfiddle

Answer 2

Try adding this to your css:

.block
{
    position: relative;
    float:left;
}

Answer 3

Try this can be help

 .block{position: relative;width: 284px;} .red-sticker { font-family: Arial,sans-serif; position: absolute; right: 0px; top: 0px; display: block; width: 32px; height: 32px; padding-top: 5px; font-size: 12px; line-height: 12px; text-align: center; float: left; color: #FFF; border-radius: 50%; background-color: #A50200; background-image: linear-gradient(to bottom, #CB0400, #A50200); } p:last-child { margin-bottom: 0px; } 

 <div class="block"> <a href="#"><img src="http://www.balloontothemoon.com/images/Bubbles.jpg"> <span class="red-sticker">1<p>2</p></span> </a> </div> 

link: http://jsfiddle.net/E2aWr/162/

Answer 4

All you needed to do was to make the containing div with class "block" have relative positioning, as when you use absolute positioning it takes the element out of the flow of the document.

.block {
   position: relative;
   width: 280px;
}

http://jsfiddle.net/E2aWr/158/