display: none takes it out of the document flow, and removes it from accessibility treeopacity: 0 makes the element transparent, but keeps it in the document flow, and you can click on itvisibility: hidden makes the element invisible, keeps it in the document, but you can’t click on itTo understand the difference between visibility: hidden and opacity: 0, think of custom designed radio/checkboxes. With visibility: hidden you can not Tab to them or click them.