用css隐藏元素

下面主要给出几种较常用的方法：

{ display: none; /* 不占据空间，无法点击 */ } 
 
{ visibility: hidden; /* 占据空间，无法点击 */ } 

{ position: absolute; top: -9999px; /* 不占据空间，无法点击 */ } 

{ position: relative; top: -9999px; /* 占据空间，无法点击 */ } 

{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ } 
 
{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ } 

{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ } 

display:none;和visibility:hidden;区别

1. 是否占据空间： display:none; 不占据空间，visibility:hidden; 占据空间，只是肉眼不可见

2. 对页面性能的影响： display:none;会产生 reflow 和 repaint （回流与重绘），而 visibility:hidden; 则不会产生这样的问题

3. 株连性： 一旦父节点设置了 display:none;，父节点及其子孙节点全部不可见，无法通过其他方法来实现个别可见。 通常情况下，一个父节点设置了 visibility:hidden，则其子孙后代也会不可见，但是，其子孙节点可通过设置 visibility:visible 来达到“再现”。