Difference between visibility hidden, display none and opacity

Display:none : Occupies No Space, No Elements Here.
Opacity:0: Occupies Space And You Can Not Click Element Behind It.
Visibility: hidden Occupies Space, You Can Click On Element Behind It.

Live Example

See the Pen <a href="https://codepen.io/w3codemasters/pen/NWPEgLw">Difference between visibility:hidden, display:none, and opacity: 0 with Live Example 2020</a> by w3codemasters (<a href="https://codepen.io/w3codemasters">@w3codemasters</a>) on <a href="https://codepen.io">CodePen</a>.