I have two h1 elements, one is a subtitle and is placed behind the first one using z-index. I want to have a click on the first h1. This click needs to go to jQuery because I'm going to use it to stop playback of a video amongst other things. I used to have a click on the first h1 itself, but since its a block element this wasn't ideal as it was stretched over the whole page width. So I replaced that with a dummy anchor .
My problem is that I can't get the subtitle h1 to stop blocking the title h1. Even when using z-index. Somehow it keeps blocking the first h1
Ideally the text in both h1's is clickable, but I prefer the title to be clickable.
<a href="#" class="content-title-link">FooFooFooFooFoo</a>
<h1 class="content-subtitle"> Bar </h1>
z-index only works on positioned elements
position:relative , or
Another option would be to have the non-link h1 ignore pointer events