Stacking images using CSS and HTML - html

Question

In my code I have 5 div boxes lined up in a 900px container div. I'm have pictures inside the divs and text at the bottom. Both the pictures and text are in their own a href tags linking to the same place (because I wanted the text to :hover and this was the only way to do it).
So I need a SALE icon ONTOP of the pictures and on the edge (0px) of the border. The red sale icon is 100x100px (and at the very bottom, alone, in my sample HTML code). Everytime I use position: relative or position: absolute it pushed the picture and text in the div DOWN. How do I get the one on top of the other?? What am I doing wrong here? Here is the website right now: http://user2cis133.achins.com/final/
Here is some JSFiddle:
http://jsfiddle.net/gzbvejry/
Also I've read a shitton of articles on this and even copied and pasted their code and changed it for this and it still doesn't work.
#second {
background-color: #fff;
width: 210px;
height: 390px;
float: right;
border: 1px #000 solid;
border-radius: 10px 10px 10px 10px;
margin-left: 4px;
margin-top: 10px;
text-align: center;
}
a.hvr:link {
color: #696969;
}
a.hvr:hover {
color: #6495ED;
}
.brd {
position: abosolute;
margin: 5px;
}
#sale {
display: block;
left: 70px;
top: 0px;
}
<div id="second">
<a href="#">
<img class="brd" src="images/blue prom1.jpg" width="200px" heigth="380px" />
</a>
<a class="hvr" href="#">
Empire Waist Blue Prom Dress <br>
$150
</a>
</div>
<img src="images/sale.png" width="100px" height="100px"/>

Answer 1

give position:relative in #second{}.Also check the spelling of absolute in #sale, its wrong in the link
#second {
background-color: #fff;
width: 210px;
height: 390px;
float: right;
border: 1px #000 solid;
border-radius: 10px 10px 10px 10px;
margin-left: 4px;
margin-top: 10px;
text-align: center;
position:relative;
}
#sale {
position: absolute;
right: -49px;
top: -6px;
}

Answer 2

<div id="second">
<div class="sticker sticker-new"></div>
<a href="#">
<img class="brd" src="http://user2cis133.achins.com/final/images/aquaprom.jpg" width="200px" heigth="380px" />
</a>
<a class="hvr" href="#">
Empire Waist Blue Prom Dress <br>
$150
</a>
#second {
background-color: #fff;
width: 210px;
height: 390px;
border: 1px #000 solid;
border-radius: 10px 10px 10px 10px;
margin-left: 4px;
margin-top: 10px;
text-align: center;
}
a.hvr:link {
color: #696969;
}
a.hvr:hover {
color: #6495ED;
}
.brd {
margin: 5px;
}
#sale {
position: relative;
display: block;
left: 70px;
top: 0px;
}
.sticker-new {
background: url(http://user2cis133.achins.com/final/images/sale.png) no-repeat;
left: auto;
right: 0;
}
.sticker {
position: absolute;
top: 0;
left: 68px;
width:171px;
height:171px;
}