Скрываем элементы грамотно!

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-дереве, но визуально скрыт.

 Доступность. Блок полностью доступен для ридеров.

Прокрутить вверх