Whats wrong with this animation? css/javascript

When i have this code the animation works, but the image is in the wrong position:

    #myAnimationUp {
      background-image: url("images/ships/ship<?php echo $_SESSION['getshiptype']; ?>up.png");
      background-size:     cover;                      
      background-repeat:   no-repeat;
      height:55px; 
      position:absolute; 
      width:30px;
      bottom:1px; 
      right: 30px;
    }

Code (markup):

So i imagined, pulling the image down with css would do the job since bottom would display the image higher then using this code:

    #myAnimationUp {
      background-image: url("images/ships/ship<?php echo $_SESSION['getshiptype']; ?>up.png");
      background-size:     cover;                      
      background-repeat:   no-repeat;
      height:55px; 
      position:absolute; 
      width:30px;
      top:35px; 
      right: 30px;
    }

Code (markup):

With the code above the image is in the correct position, but the animation doesn't happen anymore. The image stays where it is unlike the most upper code where the animation does work.

Animation code:

    <script>
      function myMoveUp() {
        var elem = document.getElementById("myAnimationUp");  
        var pos = 0;
        var id = setInterval(frame, 50);
        Clock.pause();
        function frame() {
          if (pos == 105) {
            clearInterval(id);
            Clock.resume();
            keymanager.resume();
          } else {
            pos++; 
            elem.style.bottom = pos + 'px'; 
            keymanager.suspend();
          }
        }
        MoveShip();
      }
    </script>

Code (markup):

I have taken 2 screenshots to help understand whats going on:

https://i.ibb.co/q1Tgmp2/screen6.png -> Screen shot 1

https://i.ibb.co/87GM5yq/screen5.png -> Screen shot 2

In screenshot 1 you can see that the ship is positioned in grid C4.

In screenshot 2 you can see the ship facing north, but not in grid C4, but in B4.

This only happens when i use bottom:1px; in the css. At this time the animation works. When i use top:35px; to get the image in grid C4 the animation doesn't work anymore.

What is causing this and how do i fix it?

 

Nobody has an idea on this?
elem.style.top works but elem.style.bottom just doesn't.. why?

 

Recheck the theme you're using to see if they correspond, I don't have time to look at it. style.css. Or debug jCarosel to find out why it thinks that's a good size.................... DOM inspector.

 

Im not using any theme. Everything is correct except when i change top to bottom in elem.style it freaks out. Each direction works except this one.

edit: I had to add a relative div instead of absolute. That was my error. Fixed it now