display:none; visivility:hidden; opacity:0; の使い分け

#要素を非表示にする際に使われる方法
display:none;
visibility:hidden;
opacity:0;

参照 : https://qiita.com/FJHoshi/items/0ed4b628acdab696be62

##display:none;
cssプロパティのdisplayに指定できる値。
他の値に
・block
・inline
・inline-block
がある。

##visivility:hidden;
cssプロパティのvisibilityで指定できる値。
他の値に
・visible（ボックスを表示）
・collapse（テーブルの行や列にこの値をしてすると、その部分を詰めて表示する）
などがある。

##opacity:0
cssプロパティのopacityで指定できる値。
要素の色の透明度を指定する。
数値：0.0~1.0までの数値を指定する。0が完全な透明。1は完全な不透明。

#3つの違い
要素を無くすか、非表示にするか、透明にするか
##display:none
要素ごと消してしまう。
レイアウトが変わる場合がある。
もう完全になくなる。
##visibility:hidden
要素を非表示にするだけなので要素自体は残っている。
領域確保できるけど、クリックは出来ない。
##opacity:0
要素を透明にするだけ。
領域確保、クリックも可能。