jQuery Help - Appear underneath rather than on top

I have the following jQuery which I need adapting:

$(document).ready(function(){

$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity:开发者_如何学JAVA "hide", top: "-70"}, "fast");
});

});

CSS:

.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}

div.rss-popup em {
background: url(../images/rssbuttonbubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#rss-icon {
width: 42px;
height: 42px;
background: url(../images/rssbutton.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}

The HTML:

<div class="rss-popup">
<a href="feed-link" id="rss-icon">RSS Feed</a>
<em>Subscribe to our RSS Feed</em>
</div>

I want to make the rssbuttonbubble.png appear underneath rather then from above, can any make any suggestions as to how I can achieve this?

Just adjust your top values in the animation and css to be the distance you want:

$(".rss-popup a").hover(function() {
 $(this).next("em").stop(true, true).animate({opacity: "show", top: "60"}, "slow");
}, function() {
 $(this).next("em").animate({opacity: "hide", top: "70"}, "fast");
});

And in CSS change top: -70px; to:

top: 70px;

This will make it appear below, then just decrease those values if you want it higher, increase if you want it lower.

Nick's answer is correct. You will want to attempt to do this via CSS but just in case you can't you could also achieve something similiar via Jquery. There is an offset() function that returns the onscreen position of a matched element. Once you have that you can then set the position of another element to this position and add the source elements height to the Y coordinate.

See the jQuery documentation here.