What is the difference between display:none, visibility:hidden, and opacity:0?

All three hide an element visually, but behave very differently. display:none: completely removes the element from the document layout — it takes up no space, is not accessible to screen readers (by default), and cannot receive events. visibility:hidden: the element is invisible but still occupies its space in the layout (a "ghost" effect). It is hidden from screen readers but does not affect document flow. opacity:0: the element is fully transparent but still occupies space, can receive pointer events, and is accessible to screen readers. Use opacity:0 combined with pointer-events:none and aria-hidden="true" for animated show/hide transitions.