前言
总括： 本文详细讲述了在网页中用CSS隐藏元素的七种方法。
-
原文博客地址：从隐藏元素谈起
-
知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者（简书）
-
博主博客地址：Damonare的个人博客
念念不忘,必有回响;有一口气,点一盏灯。
正文
说起隐藏元素我想每一个前端er都能说起几种，但能说全的我想就不是很多了。博主总结了几种隐藏元素的方法，总结如下：
1 div{ 2 3 overflow:hidden 4 opacity:0； 5 visibility:hidden 6 display:none 7 position:absolute 8 clip(clip-path):rect()/inset()/polygon() 9 z-index:-1000 10 transform:scaleY(0) 11 }
我们为什么会需要这么多隐藏元素的方法呢，而且他们看起来实现的都是同样的效果。其实每一种方法实际上都有一些细微的不同，这些不同决定了在一些特定场合下使用哪一种方法。我们下面细细探讨下这些细微之处.
1. overflow
1 .hide{ overflow:hidden; /* 占据空间，无法点击 */}
overflow的hidden用来隐藏元素溢出部分，占据空间，无法响应点击事件。
2.opacity
.hide{ opacity:0;/* 占据空间，可以点击 */}.hide_2{ -webkit-filter:opacity(0); filter:opacity(0);/* 占据空间，可以点击 */}
过滤元素filter也可使用opacity值设置透明度，不过filter现在的兼容性不好，只支持webkit内核，这里顺带一提。
opacity是用来设置元素透明度的，但当设置成0的时候也就相当于隐藏元素了。因此，元素依然存在原来的位置，占据空间也可响应事件。如果你打算使用 opacity 属性在读屏软件中隐藏元素，很不幸，你并不能如愿。元素和它所有的内容会被读屏软件阅读，就像网页上的其他元素那样。换句话说，元素的行为就和它们不透明时一致。
3.visibility
.hide{ visibility:hidden; /* 占据空间，无法点击 */}
如同 opacity 属性，被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏
4.display
.hide{ display:none;/* 不占据空间，无法点击 */}
经典的display隐藏元素,这个是彻底的隐藏了元素，不占据空间，也就不影响布局，当然也无法响应事件。
5.position
.hide{ position：absolute; left:-99999px; top:-90999px;/* 不占据空间，无法点击 */ } .hide-2{ position：relative; left:-99999px; top:-90999px;/* 占据空间，无法点击 */ }
假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互——译者注）。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。下采用这种办法未尝不可。
6.clip/clip-path
.hide{ position:absolute;/*fixed*/ clip:rect(top,right,bottom,left);/* 占据空间，无法点击 */}.hide_2 { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }
隐藏元素的另一种方法是通过剪裁它们来实现。在以前，这可以通过 clip 属性来实现，但是这个属性被废弃了(现在浏览器依然支持)，换成一个更好的属性叫做 clip-path。clip-path属性实在是用处大大滴有，可以很容易的实现一些复杂的图形大漠老师分享的一个链接，该链接里的图形大多都是用clip-path的polygon值来实现的。但可惜的是依旧只能在chrome40+浏览器里使用.
7.z-index
.hide{ position:absolute; z-index:-1000;/* 不占据空间，无法点击 */}
通过设置z-index值使其它元素遮盖该元素也算是一种隐藏了。
8. transform
.hide{ transform: scale(0,0)/* 占据空间，无法点击 */}
