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

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)


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:

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 for this.
1 Like