大家一看到隐藏元素应该会想到visibility:hidden和display:none，另外的几种您是否能想起来呢？？？
要隐藏的元素为下面的div
| 名称 | 实现 | 描述 |
| display:none | .hide{ display:none; } | 元素在页面上彻底消失，不占据空间， 会导致浏览器重排和重绘，不可交互 |
| visibility:hidden | .hide{ visibility:hidden; } | 元素在页面消失，但是仍然占据空间， 只会导致浏览器的重绘，不会重排。 适用于元素隐藏后，不希望页面布局 发生变化的场景 |
| opacity:0 | .hide{ opacity:0; } | 设置元素的透明度为0，只是在视觉 上隐藏了元素，元素本身仍然占据着 空间，并影响网页的布局，可交互， 可被读屏软件识别 |
| position | .hide { position: absolute; top: -9999px; left: -9999px;} | 假设有一个元素你想要与它交互，但 是你又不想让它影响你的网页布局， 没有合适的属性可以处理这种情况 （opacity 和 visibility 影响布局， display 不影响布局但又无法直接 交互）。在这种情况下，你只能考 虑将元素移出可视区域。这个办法 既不会影响布局，有能让元素保持 可以操作。 |
| position | .hide{ position:absolute; z-index:-1000;/* 不占据空间，无法点击 */} | 通过设置z-index值使其它元素遮 盖该元素也算是一种隐藏，此方法 不占据空间，不可交互，无法点击 |