Как скрыть блок в CSS

Есть несколько способов скрыть элемент в CSS:

1. display: none; - полностью удаляет элемент из потока документа

.hidden {
  display: none;
}

2. visibility: hidden; - элемент остаётся в потоке, но становится невидимым

.invisible {
  visibility: hidden;
}

3. opacity: 0; - элемент становится прозрачным, но остаётся кликабельным

.transparent {
  opacity: 0;
}

4. Позиционирование за пределами экрана:

.offscreen {
  position: absolute;
  left: -9999px;
}

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