How to search inside an element by coordinates in javascript and HTML

Question

Lets say that I have an element that is a div. It is 500x500 pixels. Inside of it are many boxes that have absolute positioning to the larger div. If I want to use document.elementFromPoint(), should I be getting the offset of the main div and then adding px values to search in the box. Or should I be doing something like mainDiv.elementFromPoint().

The main div has relative positioning and the other divs have absolute positioning.

I have been unable to look for elements within the box using elementFromPoint, is there something that I am not understanding about the way that positioning works?

Answer 1

Access and test this pen

This will make you understand the thing that document.elementFromPoint(); only works with document.

JS

function changeColor(newColor) {
  elem = document.elementFromPoint(250, 150);
  elem.style.backgroundColor = newColor;
}

changeColor('#dd4d39');

HTML

<div class="main">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

.main {
  width: 500px;
  height: 500px;
  margin: 50px;
  background: #eee;
  display: inline-block;
  position: relative
}

.main div {
  width: 98px;
  height: 98px;
  margin: 1px;
  background: #ddd;
  display: inline-block;
  position: absolute
}

.main div:nth-child(2) {
  top: 0;
  left: 100px;
}

.main div:nth-child(3) {
  top: 100px;
  left: 0;
}

.main div:nth-child(4) {
  top: 0;
  left: 200px;
}

.main div:nth-child(5) {
  top: 200px;
  left: 0;
}

.main div:nth-child(6) {
  top: 0;
  left: 300px;
}

.main div:nth-child(7) {
  top: 300px;
  left: 0;
}

Reference document.elementFromPoint();