2019.09.07
CSS
重なっててクリックできない！下の要素クリックできるようにする方法
「aタグやグーグルマップ、動画」等の上に、画像や他の要素を配置した場合、下の要素が選択(クリックやドラッグ)できなくて困った！という問題を経験したことがありませんか？
グーグルマップの上に画像を配置するという案件があり、画像の下のグーグルマップが動かせないという問題が発生したため今回調査して解決策を探しました。
今回CSSをたった1行追加するだけで解決できました！
下の要素をクリックできるようにする方法
ドラッグできない例：グーグルマップとテキスト
このようにテキストの黄色背景の部分はドラッグできません。
See the Pen
blog_pointer-events_01 by 葱 (@negika)
on CodePen.
上の要素のCSS「pointer-events」を変更する
単純に上のCSSに「pointer-events: none;」を追加してみてください。このように黄色い部分でもグーグルマップがドラッグ可能です。
See the Pen
blog_pointer-events_02 by 葱 (@negika)
on CodePen.
まとめ
以上、下の要素をクリックする方法をご紹介しました！たった1行で解決できる「pointer-events: none;」って、知らない方多いのでは！？活用してみてください。