jQuery animate goes under element when element is moved out side its container

Question

I have element that is inside container with position relative and when I move this element out side of container, it disappears. But I need that element to be shown after it is out of its own container. So how can I make that element to be shown after it goes out side of its container?

<div class="container">
    <div class="moving-element">
    </div>
</div>


$(element).animate({"top": "-100px"}, speed, easing, func);

Answer 1

Using CSS you can set the z-index for that element.

z-index: 999;

Would ensure that it is almost always at top (unless some other element has a higher z-index and is overlapping).

EDIT

Actually, it might be your CSS or other conflicting elements, take a look at:

<style type="text/css">
.container {
height: 500px;
width: 500px;
background: red;
}

.moving-element {
position: relative;
height: 250px;
width: 250px;
background: blue;
}
</style>

<div class="container">
    <div class="moving-element">
    </div>
</div>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
$(function() {
    $('.moving-element').animate({"top": "-100px"}, 1000);
});
</script>

Works for me.