CSS不顯示隱藏是一個常見的問題。有時候,我們想在網頁中隱藏一些內容,比如一些敏感信息或者一些不必要的內容。而CSS提供了一些隱藏元素的方式:
/*通過display屬性隱藏元素*/ .hidden{ display:none; } /*通過visibility屬性隱藏元素*/ .hidden{ visibility:hidden; } /*通過opacity屬性隱藏元素*/ .hidden{ opacity:0; } /*通過position和z-index屬性隱藏元素*/ .hidden{ position:absolute; left:-9999px; top:-9999px; z-index:-1; }
但是,有時候我們會遇到一些情況,即使我們將元素隱藏了,但是它仍然會出現在頁面上,比如使用CSS3的transition屬性進行動畫效果時。這時候我們需要使用一個CSS技巧,將元素從頁面中“完全”移除,而不是只是隱藏起來:
/*將元素從頁面中“完全”移除*/ .hidden{ position:absolute; left:-9999px; top:-9999px; width:0; height:0; }
這個技巧通過將元素的位置和大小設為0,可以將元素從頁面中完全移除,從而解決了不顯示隱藏的問題。