What ways do you know to hide an element in CSS?

There are several ways to hide an element in CSS:

• display: none; — the element is completely removed from the document flow and does not occupy space.
• visibility: hidden; — the element is hidden but still takes up space.
• opacity: 0; — the element becomes transparent but remains in place and responds to events.
• position: absolute; left: -9999px; — the element is moved outside the visible area.
• Using clip-path or clip to crop the visible part.

Example:

.hidden {
  display: none;
}
.invisible {
  visibility: hidden;
}
.transparent {
  opacity: 0;
}