JSFiddle - React, Tailwind, and code Playground
HTML
<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 = document.getElementById(id).getBoundingClientRect();
//hide the image for a moment and get the box id
document.getElementById(id).style.display = "none";
var elem = document.elementFromPoint(rect.left, rect.top);
document.getElementById(id).style.display = "";
//console.log(elem.id);
return elem ? elem.id : undefined
}
function moveImage(e) {
var id = document.getElementById("image");
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';
}
//find which box is overlapped.
let boxId = get_position("image");
if(boxId) console.log(boxId);
};
window.onload = function(){
window.addEventListener('keydown', moveImage);
}