z-index の値を無視して背面要素を操作可能にするCSS

Last updated at 2022-11-30Posted at 2015-09-11

装飾的な意味合いの要素を z-index を利用して前面に配置する際、ボタンなどの重要な要素が背面になりクリックなどの操作ができなくなってしまう場合があります。

z-index の重なり順を維持したまま背面要素の操作を可能にするには、前面要素に pointer-events: none; を指定します。

HTML


<div class="obj">（装飾的要素）</div>
<button type="button" class="btn">button</button>

CSS


.obj {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.btn {
  position: absolute;
  z-index: 1;
}

pointer-events プロパティのブラウザサポート状況は以下となります。
主要ブラウザすべてで問題なく利用できます。