C помощью display: none.
Данное свойство, словно удаляет блок и всех его потомков, а место, где он стоял, автоматически будет занятно идущим за ним контентом. Несмотря на то, что блок скрыт, ресурсы например картинки, по-прежнему будут загружаться с сервера.
Доступность. Блок будет полностью скрыт для ридеров.
⠀
C помощью opacity: 0.
Установив данному свойству значение «0», сам блок, и все что в нём, будет скрыто. В отличии от способа выше, мы скрываем блок только визуально, таким образом, пространство, которое он занимал, остается за ним, он по-прежнему доступен для клика.
Доступность. Блок доступен для ридеров.
⠀
C помощью visibility: hidden.
Работает аналогично способу с opacity: 0. Скрытый блок остается в потоке, влияя на контент стоящий после. Но есть одно важное исключение, если его потомку, дописать свойство visibility: visible, потомок скрытого блока, отобразиться в скрытом блоке.
⠀
Доступность. Блок полностью скрыт от ридеров.
⠀
C помощью clip-path: polygon(0 0, 0 0, 0 0, 0 0).
Данное свойство, работает как ограничитель области отрисовки. Мы задаем координаты, и управляем какие части будут скрыты, а какие нет внутри блока. Когда значение всех координат равняется «0», содержимое будет скрыто, блок оказывает влияние на поток.
Доступность. Блок полностью доступен для ридеров.
⠀
C помощью position: absolute/fixed.
При позиционировании, мы можем скрыть элемент за пределами экрана(видимой области), задавая ему отрицательные значения. Например установив для позиционируемого элемента, значение свойства top: -200px. Таким образом он будет находиться в html-дереве, но визуально скрыт.
Доступность. Блок полностью доступен для ридеров.
