HTML - Removing an element's "presence" on the page but keeping its visibility?

Question

I have an element that overlays another element. The main element is a canvas where elements constantly have mouse interactions and the element directly overtop of it just shows elements that act as little markers. Same position, same size and it's important the overlay is overtop of the canvas.

What would it mean to make this "overlay" only exist visibility wise? As in having no possible user input because for its purposes it's not really there to be interacted with, just showing something.

Removing selection in CSS stops you from clicking on it but it's still overtop of the other element and doesn't allow mouse events. Hiding the element removes its presence but also makes it invisible.

In a normal desktop application you would just draw something to the screen and add functionality if you wanted but with HTML those two things are inherently the same.

Answer 1

Turns out all it took was setting the pointer-events CSS attribute to none on whatever you want to have no presence.

I figured it would be a little more interesting than that, but there's a built in way in CSS.

<div id="canvas"></div>
<div id="overlay"></div>

#canvas, #overlay {
  width: 500px;
  height: 500px;
  position: absolute;
}

#canvas {
  background: blue;
}

#overlay {
  background: red;
  pointer-events: none; // right here
}

$('#canvas').click(function() {
    alert('Clicked');
});

https://jsfiddle.net/ufsy33aw/

Answer 2

I believe adding in the CSS the following code solves your issue:

.no-interaction { z-index : -5 }

OR

.interaction { z-index : 5 }