Как сокрытие элемента повлияет на другие элементы

Сокрытие элемента может повлиять на другие элементы в зависимости от метода, который используется:

1. display: none — элемент полностью удаляется из потока документа, соседние элементы занимают его место.

.hidden {
  display: none;
}

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

.invisible {
  visibility: hidden;
}

3. opacity: 0 — элемент прозрачный, но продолжает взаимодействовать с событиями (клики, ховеры).

.transparent {
  opacity: 0;
}

4. position: absolute + left: -9999px — элемент выносится за пределы экрана, но технически остается в DOM.