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.
<div class="title-box">
<h1 class="content-title">
<a href="#" class="content-title-link">FooFooFooFooFoo</a>
</h1>
<h1 class="content-subtitle"> Bar </h1>
</div>Fiddle with my problem: https://jsfiddle.net/nL5pn4w2/4/
z-index only works on positioned elements position:absolute , position:relative , or position:fixed
Another option would be to have the non-link h1 ignore pointer events pointer-events: none;