jQuery animate goes under element when element is moved out side its container
-
16-09-2019 - |
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);
Solution
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"></script>
<script type="text/javascript">
$(function() {
$('.moving-element').animate({"top": "-100px"}, 1000);
});
</script>
Works for me.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow