CSS 隐藏页面元素的几种方式

1. opacity: 0; 元素隐藏，但不改变页面布局（仍保留原占位空间）；并且如果该元素已经绑定一些事件，如click事件，那么点击该区域也能触发事件；

2. visibility: hidden; 元素隐藏，但不改变页面布局；也不会触发该元素已绑定的事件；在文档布局中仍保留原占位空间（重绘）；

3. display: none; 元素隐藏，改变页面布局，不再显示对应元素，在文档布局中不再分配空间（回流+重绘）；

4. z-index: -1; 也可以将元素隐藏，相当于将元素置于其他空间的下层，也就是不可见的效果。

---