Какие знаешь способы скрыть элемент со страницы с помощью 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;
}

5. clip-path - обрезает элемент до нулевого размера:

.clipped {
  clip-path: inset(100%);
}

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