先把css隱藏頁面元素有幾種方法列出來，方便查看以及使用，下文再分析其中的原理

• display ： none ; /* 不占據空間，無法點擊 */

• opacity: 0; filter:Alpha(opacity=0); /* 占據空間，可以點擊 */

• visibility: hidden; /* 占據空間，無法點擊 */

• height: 0; overflow: hidden; /* 不占據空間，無法點擊 */

• position: absolute; top: -999em; /* 不占據空間，無法點擊 */

另外我還看到張鑫旭大神博客里面還有寫著其他幾種方法

• position: relative; top: -999em; /* 占據空間，無法點擊 */

• position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據空間，可以點擊 */

• zoom: 0.001;
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  /* IE6/IE7/IE9不占據空間，IE8/FireFox/Chrome/Opera占據空間。都無法點擊 */

• position: absolute;
  zoom: 0.001;
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  /* 不占據空間，無法點擊 */

歡迎補充！

既然有這么多的效果，那為什么不直接統一一個標準來執行，簡潔了事。可是想想，它們看起來都實現著隱藏的效果，但是每一種方法與其他方法之間都有一些的不同，這些不同決定了在一個特定的場合下使用哪一個方法。所以寫這篇文章的原因就是把這些隱藏的方法總結一下，方便以后翻閱使用。

Display

display屬性依照詞義真正隱藏元素。將 display屬性設為 none 確保元素不可見并且連盒模型也不生成。使用這個屬性，被隱藏的元素不占據任何空間。不僅如此，一旦 display設為none任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在。任何這個元素的子孫元素也會被同時隱藏 -- 也就是【“株連性”】，下文會有講解。為這個屬性添加過渡動畫是無效的，它的任何不同狀態值之間的切換總是會立即生效。

不過請注意，通過 DOM 依然可以訪問到這個元素。因此你可以通過 DOM 來操作它，就像操作其他的元素。

Opacity

opacity屬性的意思是設置一個元素的透明度。它不是為改變元素的邊界框（bounding box）而設計的。這意味著將 opacity 設為 0 只能從視覺上隱藏元素。而元素本身依然占據它自己的位置并對網頁的布局起作用。它也將響應用戶交互。如果在IE8以下瀏覽器 需要添加濾鏡才能添加透明，另外可以閱讀之前文章《IE7透明度兼容》。

Visibility

visibilitys屬性它的值設為 hidden將隱藏我們的元素。如同opacity屬性，被隱藏的元素依然會對我們的網頁布局起作用。與 opacity 唯一不同的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏。
這個屬性也能夠實現動畫效果，只要它的初始和結束狀態不一樣。這確保了 visibility 狀態切換之間的過渡動畫可以是時間平滑的（事實上可以用這一點來用 hidden 實現元素的延遲顯示和隱藏——譯者注）。
.hide { visibility: hidden;}

我原本以為元素使用Visibility:hidden之后，使用Opacity：1或者jQuery的 fadeIn()蕩入效果可以使元素顯示出來，可是使用jquery的animate時候，鼠標經過將隱藏元素設置為Opacity：1的時候，瀏覽器提出了“opacity is not defined”的報告。。。
使用第二種fadeIn()，鼠標經過觸發元素的時候，瀏覽器沒有報錯，隱藏元素會自動加上 display:block ;可是隱藏元素還是沒有顯示出來。。。
后來翻了一下資料， visibility是這樣定義的： visibility屬性規定元素是否可見。
而我所做的Opacity：1或者jQuery的 fadeIn()都是對透明度的操作。
由此可見在這個情況下，“可見” 與 “透明” 完全不搭邊。

Position

假設有一個元素你想要與它交互，但是你又不想讓它影響你的網頁布局，沒有合適的屬性可以處理這種情況（opacity 和 visibility 影響布局， display 不影響布局但又無法直接交互）。在這種情況下，你只能考慮將元素移出可視區域。這個辦法既不會影響布局，又能讓元素保持可以操作。
但Position這個屬性用起來會相對復雜一點，因為父級要設置為相對定位，再而將要設置的元素添加絕對定位，
下面是采用這種辦法的 CSS：
.hide { position: absolute; top: -9999px; left: -9999px;}
這里的top right bottom left數值還是看項目的需求，這里附上前期完成項目用到的
項目實例

這種方法的主要原理是通過將元素的 top 和 left 設置成足夠大的負數，使它在屏幕上不可見。采用這個技術的一個好處（或者潛在的缺點）是用它隱藏的元素的內容可以被讀屏軟件讀取。這完全可以理解，是因為你只是將元素移到可視區域外面讓用戶無法看到它，而且也方便進行交互，效果實現起來感覺還不錯。。。

但是你得避免使用這個方法去隱藏任何可以獲得焦點的元素，因為如果那么做，當用戶讓那個元素獲得焦點時，會導致一個不可預料的焦點切換。這個方法在創建自定義復選框和單選按鈕時經常被使用。（用 DOM 模擬復選框和單選按鈕，但用這個方法隱藏真正的 checkbox 和 radio 元素來“接收”焦點切換——譯者注）

display:none和visibility:hidden

在張大神博客看到這兩者的不同，主要是下面這三個：

空間占據

回流與渲染

株連性

第一點：這個好理解；
第二點：display:none 隱藏產生reflow和repaint(回流與重繪)，而visibility:hidden 沒有這個影響前端性能的問題；
第三點：就是“株連性”方面的差異，所謂“株連性”就是父元素設置了隱藏屬性，其子元素都會被隱藏。
參照下面代碼的栗子

ID為Odiv1的div如果設置了display:none或者visibility:hidden，那么其子元素都會被隱藏掉，一個都不放過，想想好慘T T。
如果 id="Odiv1"設置為visibility:hidden ，其中有個子元素比較調皮， " .tiaopi ”設置了 visibility:visible 那么奇跡發生了，這個元素單獨顯示出來而其他元素還是老老實實被隱藏掉；

可是display:none用同樣的做法，卻無效T T，連個機會都不給。。。

可能是這兩個屬性的“株連性”也有強弱一面（強弱這兩個詞不知道這樣講對不對）

 <div id="Odiv1">
     <div id="hide tiaopi">我要被隱藏啦~~~</div>
     <div id="hide">我要被隱藏啦~~~</div>
     <div id="hide">我要被隱藏啦~~~</div>
 </div>

張大神對比總結很生動形象：
display:none是個相當慘無人道的聲明，子孫后代全部搞死（株連性），而且連塊安葬的地方都不留（不留空間），導致全體民眾嘩然（渲染與回流）。
visibility:hidden則具有人道主義關懷，雖然不得已搞死子孫，但是子孫可以通過一定手段避免（偽株連性），而且死后全尸，墓地俱全（占據空間），國內民眾比較淡然（無渲染與回流）。

height:0和overflow:hidden的組合

這兩個結合其實也是一個挺不錯的想法，但是在元素未知高度的情況下，交互操作起來相對會麻煩一些。可以看一下我前面的文章《animate使用height:auto無效果》
height:0和overflow:hidden組合隱藏“失效”的條件如下：祖先元素沒有position:relative/absolute/fixed聲明，同時內部子元素應用了position:absolute/fixed聲明。

記住這個：position: absolute元素溢出overflow: hidden元素的時候，如果其第一個含有position屬性(static除外)的祖先元素（一直到body）是overflow: hidden元素祖先元素的時候，則不隱藏；否則，隱藏。

參考文章：
1.張鑫旭大師博客
2.眾成翻譯之“十年蹤跡”
3.sitepoint