隐藏元素的方法
隐藏元素的方法可以总结为六类：直接隐藏、对溢出内容隐藏、对元素透明度进行调整、将元素移除当前屏幕、对元素的层级关系进行调整、对元素进行裁剪
只有对元素的透明度进行调整才可以点击，其余都不可点击
// 直接隐藏visibility:hidden
display:none// 对溢出内容隐藏
overflow:hidden
text-overflow:ellipsis
// 对元素透明度进行调整
opacity:0
background:transparent
// 将元素移除当前屏幕
position:absolute/relative
margin:-1000px
transform:translate(-9999px)
text-indent:-9999px
// 对元素的层级关系进行调整
z-index:-1000// 对元素进行裁剪
clip(clip-path):rect()/inset()/polygon()
第一类方法：直接隐藏
.hide{
display:none;/* 不占据空间，无法点击 */
}
.hide{
visibility:hidden; /* 占据空间，无法点击 */
}
第二类方法：对溢出内容隐藏
.hide{
overflow:hidden; /* 占据空间，无法点击 */
}
.hide{
text-overflow:ellipsis; /* 占据空间，无法点击 */
}
第三类方法：对元素透明度进行调整
.hide{
opacity:0;/* 占据空间，可以点击 */
}
.hide_2{
-webkit-filter:opacity(0);
filter:opacity(0);/* 占据空间，可以点击 */
}
.hide_2{
background:transpant;/* 占据空间，可以点击 */
}
注：过滤元素filter也可使用opacity值设置透明度，不过filter现在的兼容性不好，只支持webkit内核，这里顺带一提。
第四类方法：将元素移除当前屏幕
.hide{
position：absolute;
left:-99999px;
top:-90999px;/* 不占据空间，无法点击 */
}
.hide-2{
position：relative;
left:-99999px;
top:-90999px;/* 占据空间，无法点击 */
}
div{
margin-left:-9999px; /* 占据空间，无法点击 */
}
.hide{
transform: translate(0,0)/* 占据空间，无法点击 */
}
.hide{
div{text-indent:-9999px;}/* 占据空间，无法点击 */ }
第五类方法：对元素的层级关系进行调整
.hide{
position:absolute;
z-index:-1000;/* 不占据空间，无法点击 */
}
第六类方法：对元素进行裁剪
.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，但可惜的是依旧只能在chrome40+浏览器里使用。
参考：
CSS 隐藏元素的八种方法
css之10种隐藏元素的方法
用 CSS 隐藏页面元素的 5 种方法