When attempting to create an infinite animation for the rocket similar to the one shown here, I encountered an issue where the rocket does not hide beneath the parent div as demonstrated in the example. Instead, the rocket changes position on the Y-axis and overlaps all other elements. Here is the code for the project (jsfiddle):
var rocket = document.querySelector('#rocket');
rocket.addEventListener('click', function() {
this.classList.toggle('clicked');
})/*=============================================
[ Page Setup ]
==============================================*/
body {
background: #34495e
}
#pageWrap {
...
<body>
<div id="pagewrap">
...
</div>
</body>