Javascript doesn't move HTML element

I have some JS code to make a "button pushing" effect when you click an image.

The image resizing works fine, but changing the "left" and "top" styles doesn't move the image around. I can see that it changes the style and everything, just doesn't actually change the position of the image.

Changing "left" and "top" in CSS works, by the way.

//Animations
    var top = document.getElementById("top-image");
    var bottom = document.getElementById("bottom-image");

    var maxDim = "220px";
    var minDim = "190px";


    $("#top").on('mousedown', function mouseState(e) {
        top.style.width = minDim;
        top.style.height = minDim;

        console.log(top.style.left);
        console.log(top.style.top);

        top.style.left = "50px";
        top.style.top = "50px";

        console.log(top.style.left);
        console.log(top.style.top);

    });

    $(document).on('mouseup', function mouseState(e) {
        top.style.width = maxDim;
        top.style.height = maxDim;

        console.log(top.style.left);
        console.log(top.style.top);

        top.style.left = "0px";
        top.style.top = "0px";

        console.log(top.style.left);
        console.log(top.style.top);

    });