h1他のh1をアンカーでブロックしています

Question

私はh1要素を2つ持っています.1つはサブタイトルで、最初はz-インデックスを使って配置されています。最初のh1をクリックしたいこのクリックはjQueryに移動する必要があります。なぜなら、他のものの中でビデオの再生を停止するために使用するからです。私は最初はh1自体をクリックしていましたが、そのブロック要素以来、これはページ幅全体に伸びていたので理想的ではありませんでした。だから私はそれをダミーのアンカーに置き換えました。

私の問題は、字幕h1がタイトルh1をブロックするのを止めることができないということです。 z-indexを使用している場合でも何とか最初のh1をブロックし続ける

理想的には、両方のh1のテキストはクリック可能ですが、私はクリック可能なタイトルが好きです。私の問題で

<div class="title-box"> 
 
     <h1 class="content-title"> 
 
     <a href="#" class="content-title-link">FooFooFooFooFoo</a> 
 
     </h1> 
 
     <h1 class="content-subtitle"> Bar </h1> 
 
    </div>

フィドル：要素position:absolute、position:relative配置https://jsfiddle.net/nL5pn4w2/4/

Answer 1

のz-indexが唯一の作品、またはposition:fixed

別のオプションは、非を持っているだろうリンクh1はポインタイベントを無視するpointer-events: none;

jsfiddle