了解Css的人應該都知道display:none;和visibility:hidden;之間的一些區別，當html元素被設置為display:none;后，瀏覽器不會解析該元素，“none”就是沒有，消失了，所以他不會再文檔流中占位。而visibility:hidden;僅僅是視覺上消失了，“hidden”也就是隱藏了，但是它所在的位置仍然還在，就像你把你個文件給隱藏了，但是這個文件在你的硬盤中仍然是占據一定空間的，只是你看不見而已。
對使用display:none;的元素，瀏覽器不會去解析，搜索引擎可能會認為被隱藏的文字屬于垃圾信息而被忽略，而且屏幕閱讀器（是為視覺上有障礙的人設計的讀取屏幕內容的程序）會忽略被隱藏的文字。
而對使用visibility:hidden;的元素，雖然隱藏了，但位置仍在，給人的感覺是“占著茅坑布拉斯”，要配合position:relative和position:absolute一起來用，沒有display:none;那么簡單、靈活。就另外一點，visibility:hidden;轉換為visibility:visible跟display:none;轉換為display:block;性能要好，因為display在切換可見性時會產生reflow，它要重新構建frame，當然要比visibility:visible慢。
如果你以上兩種方法都不想要的話，可以寫一個類：

.hidden{
overflow: hidden;
width: 0;
height: 0;
border:none;
}

就是采用overflow隱藏，然后把元素的基本屬性值設置為最小或無，當然，如果你要顯示的話，還得寫另一個相應的類。
CSS中的visibility和display兩個屬性很容易被混淆，因為它們看起來是做同樣的事情，但實際上，這兩個屬性是完全不同的。 visibility屬性用來設置一個給定的元素是否顯示（visibility="visible|hidden"），但是，雖然一個元素的visibility被設置為hidden，但是該元素仍然會占據設計的位置：

<script language=”JavaScript”>
function toggleVisibility(me)…{
if (me.style.visibility==”hidden”)…{
me.style.visibility=”visible”;
}
else …{
me.style.visibility=”hidden”;
}
}
</script>

<div onclick="toggleVisibility(this)" style="position:relative">
This example displays text that toggles between a visibility of ‘visible’ and ‘hidden’.
Note the behavior of the next line.</div><div>This second line shouldn’t
move, since visibility retains its position in the flow</div>

<script language=”JavaScript”>
function toggleVisibility(me){
if (me.style.visibility==”hidden”){
me.style.visibility=”visible”;
}
else{
me.style.visibility=”hidden”;
}
}
</script>

<div onclick="toggleVisibility(this)" style="position:relative">