CSS

display:none; VS visibility:hidden; VS opacity:0;

CSSで要素を見えなくする以下の3つの指定についてです。それぞれ挙動に違いがあるのでまとめておきます。
”領域を確保するかどうか”"クリックできるか”の違いがあることを覚えておくようにしています。

表にまとめると以下のようにそれぞれ違う挙動になります。

スタイル 領域の確保 クリック(イベント)
display:none; × ×
visibility:hidden; ×
opacity:0;

使い所

display:none;

完全に消えます。

visibility:hidden;

領域を確保するけどクリックすることはできない。

opacity:0;

透明になるだけで消えるわけではない。領域も確保するしクリックも出来るため誤クリックの原因になることも。