What is the difference between display none and visibility hidden in CSS?
Quick answer
display: none removes the element from the layout so it takes no space; visibility: hidden hides it but leaves the empty space, and the element can still be read in the accessibility tree in some cases.
display: none is as if the element was not in the document for layout: later siblings move up. visibility: hidden keeps the box, so a 200px-tall banner still reserves 200px. opacity: 0 is similar to hidden for layout, but the element can still receive pointer events unless you also set pointer-events: none.
For content that should not be announced to screen readers, prefer display: none or the HTML hidden attribute. To hide visually but keep it available to assistive technology (a skip link target, for example), use a visually-hidden class rather than display: none.