Element hiding Methods:

1. If you want the element is not visible, does not occupy space, resource loads, DOM can be accessed: display: none;

2. If you want the element is not visible, you can not click, but take up space, resources are loaded, you can use: visibility: hidden;

3. If you want the element is not visible, do not take up space, which was hidden when they can transitionfade effect:

div{
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s linear;
  background: cyan;
}
div.active{
  visibility: visible;
  opacity: 1;
}

Used here visibility: hiddeninstead display: none, because the display: noneinfluence of css3 transitiontransition effects.
But display: noneit does not affect the css animationanimation effects.

4. If you want the element is not visible, you can click, take up space, you can use: opacity: 0;

5. If you want the element is not visible, you can click, does not occupy space, you can use: opacity: 0; position: abolute;;

6. If you want the element is not visible and can not be clicked, take up space, you can use: position: relative; z-index: -1;;

7. If you want the element is not visible, can not click, do not take up space, you can use: position: absolute ; z-index: -1;;