I have multiples elements stacked with absolute positionning in CSS, and need to listen to events of each elements stacked not only the one on the top. So using pointer-events:none on the top one is not possible for me because I would lose events it. I know it’s possible if the elements are parent/child but can’t find a way when they are not ancestors and just moved with CSS on top of each other.

Here is a simplified example listening to mousemove and 2 divs stacked. In the console you can see that when the mouse is over the white square (over) we don’t have anymore the event from the black square (under). I need to catch them both.

const over = document.getElementById('over')
const under = document.getElementById('under')

over.addEventListener('mousemove', (event) => {
  console.log("Mouse Div Over");
});
under.addEventListener('mousemove', (event) => {
  console.log("Mouse Div Under");
});

#under {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(50% - 100px);
  height: 200px;
  width: 200px;
  background-color: black;
}

#over {
  position: absolute;
  top: 50px;
  left: calc(50% - 50px);
  z-index: 2;
  height: 100px;
  width: 100px;
  background-color: white;
}

.wrapper {
  position: relative;
}

<div class="wrapper">
  <div id="over"></div>
  <div id="under"></div>
</div>

Hope someone can help me on this one, maybe it’s not possible or I have missed something obvious…