I'm having a problem trying to use the jQuery effect "bounce" on an absolutely position div inside of a relatively positioned div. The #Bounce div is positioned to be slightly above the container div and when a certain message is received it is supposed to bounce on top of it. But what ends up happening is that the #bounce div drops down into the container div and bounces inside of it till it stops and then correctly repositions itself on top of the container div. This same code is working in Firefox but doesn't seem to be working in Webkit or IE.

Can anyone help me understand why this is happening?

if (jQuery("#Bounce").data("bouncing") == false || jQuery("#Bounce").data("bouncing") == undefined) {
        jQuery("#Bounce").show().effect("bounce",{times:10,distance:50},300,function(){jQuery("#Bounce").data("bouncing", false);});
        jQuery("#Bounce").data("bouncing", true);
}


<div id="Container" style="height: 28px; float: right; position: relative; top: 2px; cursor: pointer; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 3px; "> ...
    <div id="Bounce" style="bottom: 28px; right: 0px; height: 26px; width: 26px; z-index: 989; display: none; position: absolute; ">...</div>
</div>