Javascript, game, How can I determine the position (x,y) of a div element relative to a parent div in javascript?

Question

I made a stupid 'game'. I would like to improve on this stupid game by having the character be able to jump over a block that will scroll infinitely (looped) from the right to the left. I am trying to figure out how to determine the position of the character div and the position of the scrolling block div.

I want to know this so that I can set a conditional statement that checks of the character position(x) == block position (x) then it will end the game. else if the character position (x) == block position (x) && character position (y) ==! block position(y) a point is awarded (for jumping over the block).

So far I have tried using positon() that I am logging to the console every time a keydown event is encountered that moves the character. That way I can track where the character is. I had to do this to manually determine the bounds of my background (div id='bg') and use those bounds to limit the character from moving outside of them. However when I introduce a static block in the middle of the map it always says the position() = 0 regardless of where it is placed. This is just a simple square I put in the background div to represent a block.

I really dont know what im doing I just tried to make something for fun and now am very confused. I've been coding for a week and have no idea what I am doing. I went down a rabbit hole of collision detection documentation but its so far above my head. This seems like a simple task maybe I'm wrong in thinking that.

here is my stupid game

here is the code I have right now

$(document).ready(function() {

// movement functions
$(document).keydown(function(key) {
    switch(parseInt(key.which,10)) {
        // Left arrow key pressed - move left
        case 37:
            if($('#character').position().left > 0){
                $('#character').animate({left: "-=10px"}, 'fast'); 
                console.log($('#character').position());
            }

            else{
                $('#character').clearQueue();
            }
            break;
        // Right Arrow Pressed - move right
        case 39:

            // condition to keep in bounds of bg div

            if($('#character').position().left < 720){
                $('#character').animate({left: '+=10px'}, 'fast');
            console.log($('#character').position());
            }

            // clear animate request if cndtn fails
            else{
                $('#character').clearQueue();
            }
            break;

        // Space key pressed - (jump animation)
        case 32:
            if($('#character').position().left < 720){
            $('#character').animate({top: '-=50px'}, 'fast').animate({left: '+=10px'}, 'fast').animate({top: '+=50px'}, 'fast');
            console.log($('#character').position());
            }
            else{
                $('#character').clearQueue();
            }
            break;
    }
});

// hide rules once keys are pressed
$(document).on('keydown', function(){
    $('#rules').fadeOut(1000);
    $('#res').fadeOut(100);
    });

// character select button
$('#charSelect').click(function(){

   var input = prompt("paste image link here");
   $('#character').css('background-image','url('+input+')');
   $('#res').show();



 }); 

// background select button
$('#bgSelect').click(function(){
 var input = prompt("paste image link here");
    $('#bg').css('background-image', 'url('+input+')');
    $('#res').show();

});

//reset button 
$('#reset').click(function(){
   $('#character').css('background-image','url(Character.jpg)');
    $('#character').css('left','0px');
   $('#bg').css('background-image','url("Background.jpg")');
$('#rules').show();
$('#res').show();    

});

});

Answer 1

You can use offset function to compare positioning: var difference = $('#character').offset().left - $('#another-div').offset().left;