0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【HTML&CSS】z-index=-1に設定されたボタンがクリックできない

Last updated at Posted at 2025-04-21

背景
ボタン要素にz-index=-1を設定しました。
完全にz-index=0の要素の下で隠れているようにしていないのに、
クリックできない。

理由
z-index=-1を設定すると、その要素は通常のフロー(z-index=0と同等)よりも下に配置される。

親要素や他の要素(背景を含む)がその上に重なると、ボタンへのクリックイベントがブロックされる。

マウスイベントは最前面の要素から順に伝搬するため、上に重なった要素がクリックを「キャッチ」してしまう。

解決策
z-indexを0以上の値に設定し、ほかの方法で位置調整をする。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?