Display none, visibility hidden и opacity 0

display: none полностью убирает элемент из потока: он не занимает место и не взаимодействует с пользователем. visibility: hidden оставляет пустое место на странице, но делает элемент невидимым и неинтерактивным. opacity: 0 просто делает элемент прозрачным: он остаётся в потоке, по нему можно кликать и фокусироваться.

Все три свойства скрывают элемент визуально, но по-разному влияют на разметку, обработку событий и доступность. Важно понимать, остаётся ли элемент в потоке документа, реагирует ли на события и виден ли для вспомогательных технологий.

display: none

• Элемент полностью исключается из потока: не занимает место, соседи «съезжаются» так, будто его нет.
• Не участвует в раскладке и отрисовке, по нему нельзя кликнуть или сфокусироваться с клавиатуры.
• Часто используется для скрытия модальных окон, вкладок и любого контента, который временно не должен влиять на макет.

visibility: hidden

• Элемент остаётся в потоке и резервирует место, но не рисуется на экране.
• Не реагирует на события мыши и клавиатуры, по нему нельзя кликнуть или перевести фокус.
• Свойство наследуется: у родителя может быть visibility: hidden, а у потомка visibility: visible, и тогда потомок всё равно будет виден.

opacity: 0

• Элемент полностью прозрачен, но продолжает занимать место и участвовать в потоке.
• Остаётся интерактивным: по нему можно кликать, он реагирует на :hover, :focus и другие состояния.
• Отлично подходит для плавных анимаций появления/исчезновения; при необходимости можно отключить клики через pointer-events: none.

В этом примере три класса скрывают элементы по-разному: с .hidden-display остальная верстка смыкается, с .hidden-visibility остаётся пустое место, а элементы с .hidden-opacity можно «подсветить» наведением, даже когда они невидимы.

С точки зрения производительности display: none наиболее «жёстко» скрывает элемент, потому что браузеру не нужно его рисовать. visibility: hidden и opacity: 0 по-прежнему участвуют в раскладке, а при opacity: 0 элемент ещё и перехватывает события, что иногда мешает кликам по нижележащим элементам. Для полного скрытия и из визуального, и из фокусного порядка обычно применяют display: none (часто вместе с aria-hidden="true"), а для анимаций и «мягкого» появления — opacity: 0.