JSFiddle - React, Tailwind, and code Playground

HTML

<span>Please move image by keyboard arrows keys</span>
<div id="box2"></div>
   <div id="box3"></div>
   <div id="box4"></div>
   <div id="box5"></div>
  <img id="image" src="http://placekitten.com/69/69" style="position:absolute;left:0; top:0; z-index: 3;" height="15" width="15">
  
  
  <h1>Please check console after move image</h1>
  <p>
  I have done successfully moved a image with arrow keys but now i want getting id behind the moved image. And here i want all div id when image overlap.
  </p>

CSS

body{background:yellow;}
    #box2, #box3, #box4, #box5{width: 50px; height: 50px; background: greenyellow; position: absolute; top: 50px; left: 50px;z-index: 2}
    #box3{top: 150px; left: 150px;}
    #box4{top: 50px; left: 250px;}
    #box5{top: 150px; left: 300px;}
    
    h1{margin-top:250px;}

JavaScript

function get_position(id){
                  var rect = id.getBoundingClientRect();
                  var elem = document.elementFromPoint(rect.left, rect.top);
                  console.log(elem.id);
              }

              function moveImage(e) {
                var id = document.getElementById("image");
                  get_position(id);
                  if(e.keyCode === 37){
                    id.style.left = parseInt(id.style.left) - 5 + 'px';
                  }
                  else if(e.keyCode === 38){
                    id.style.top = parseInt(id.style.top) - 5 + 'px';
                  }
                  else if(e.keyCode === 39){
                    id.style.left = parseInt(id.style.left) + 5 + 'px';
                  }
                  else if(e.keyCode === 40){
                    id.style.top = parseInt(id.style.top) + 5 + 'px';
                  }
                  
              };

          window.onload = function(){
            window.addEventListener('keydown', moveImage);
          }