【gif有】pointer-eventsを使って重なり順(z-index)が下の要素をクリック可能にする

pointer-events: none;

「pointer-events: none;」はマウスイベントを無効するものですが、要素が重なっている場合は背後にある要素にマウスイベントが発生します。z-indexの値を無視して背面要素を操作可能することができます。

以下のように背面の要素にリンクがある場合、z-indexの値が大きい要素にカーソルを合わしても背面要素のリンクをクリックすることができない。

html


<div class="Contents">
  
<div class="Contents__text">
    ここをクリック
  </div>

  
<div class="Contents__img">
    <a href="sample.html"><img src="sample.jpg" alt=""></a>
  </div>

</div>

css

.Contents {
  position: relative;
}
.Contents__text {
  position: absolute;
  padding: 30px;
  background-color: #78b54a;
  z-index: 2;
}
.Contents__img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

上に重なっている要素に「pointer-events: none;」を追加するとz-indexの値を無効にしクリックできるようになる。

html


<div class="Contents">
  
<div class="Contents__text">
    ここをクリック
  </div>

  
<div class="Contents__img">
    <a href="sample.html"><img src="sample.jpg" alt=""></a>
  </div>

</div>

css

.Contents {
  position: relative;
}
.Contents__text {
  position: absolute;
  padding: 30px;
  background-color: #78b54a;
  z-index: 2;
  pointer-events: none; //ここに追加
}
.Contents__img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}