jQuery animate переходит под элемент, когда элемент перемещается за пределы его контейнера

Question

У меня есть элемент, который находится внутри контейнера с относительной позицией, и когда я перемещаю этот элемент за пределы контейнера, он исчезает.Но мне нужно, чтобы этот элемент был показан после того, как он выйдет из своего собственного контейнера.Итак, как я могу сделать так, чтобы этот элемент отображался после того, как он выйдет за пределы своего контейнера?

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


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

Answer 1

Используя CSS, вы можете установить z-индекс для этого элемента.

z-index: 999;

Гарантировал бы, что он почти всегда находится сверху (если только какой-то другой элемент не имеет более высокого z-индекса и не перекрывается).

Редактировать

На самом деле, это может быть ваш CSS или другие конфликтующие элементы, взгляните на:

<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"></script>
<script type="text/javascript">
$(function() {
    $('.moving-element').animate({"top": "-100px"}, 1000);
});
</script>

Работает на меня.