Passing a click event to element with lower z-index?

Coding Help
1

Hi, looking for a little bit of help on my first website ever… apologies in advance if my coding lingo is a little wonky.

I have an element that contains a PNG that has the highest z-index. Underneath the PNG is a link that is visible, however I can’t click on it because the bounding box of the PNG covers it (see screenshot)

Screen Shot 2020-08-22 at 3.56.20 PM
Screen Shot 2020-08-22 at 3.56.20 PM1114×1228 315 KB
.

The element with the PNG has a higher z-index because it is draggable and I want it to sometimes obscure the link. I’ve tried setting pointer-events:none, which allows the link below to become clickable, however, this disables the drag function.

Here is the website: http://a-love-letter-to-my-grandma.glitch.me/

2

couple of ideas:

  1. Set a clip-path on the images. It might end up being a lot of work though, unless there’s a tool to do it automatically.
  2. Write some JavaScript to handle click events and check if they hit test with the links. There’s an API https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/elementsFromPoint for this.
1 Like