Как скрыть элемент не используя display: none

Можно скрыть элемент несколькими способами:

1. visibility: hidden - элемент остаётся в DOM, занимает место, но становится невидимым.

.hidden {
  visibility: hidden;
}

2. opacity: 0 - элемент полностью прозрачный, но остаётся кликабельным (если не отключить события):

.transparent {
  opacity: 0;
  pointer-events: none;
}

3. position: absolute + вынос за пределы экрана:

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

4. transform: scale(0) - элемент сжимается до нулевого размера:

.scaled-zero {
  transform: scale(0);
}

5. width/height: 0 + overflow: hidden:

.zero-size {
  width: 0;
  height: 0;
  overflow: hidden;
}

Основное отличие от display: none - эти методы сохраняют элемент в DOM, что может влиять на производительность, но полезно для анимаций или когда нужно сохранить layout.