visibility : hidden; とdisplay: none;の違い

visibility: hidden;

要素のボックスは不可視になります (描画されません) が、レイアウトには通常通り影響します。子孫要素は visibility が visible に設定されていれば可視になります。(タブ順で操作された時などに) 要素はフォーカスを受け取ることができません。

https://developer.mozilla.org/ja/docs/Web/CSS/visibility

すなわち、そこに要素の表示領域は確保されますが、そこには何も表示されないという状況です。

display: none;

要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。
要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに visibility プロパティを使用してください。

https://developer.mozilla.org/ja/docs/Web/CSS/display

すなわち、表示領域も、要素自身も表示されないという状況です。

ただし、要素自体はHTML上に存在しているため、JavaScriptで参照することは可能です。