CSS实现隐藏页面的方式

笔者在很多面试题上，都会有这个问题。就总结了几种常用的隐藏方式。

 

opacity：设置透明度，值为0-1。为0则页面上不显示，但是元素还在那个位置,依然可以网页交互,单纯是看不到而已。

.class{

    opacity:0;

}

 

visibility：设置隐藏。hidden为隐藏，在页面不显示，交互效果也会没有。visible为显示，

.class{

    visibility:hidden;//隐藏

    visibility:visible;//显示

}

 

display:设置不显示和显示。注意了，这里要强调的一点是，如果你想使他的子元素显示，用display:visible是没用的。而上面两种方式是可以使用。

.class {

    display:none;

}

 

position位置，把他绝对定位了 挪到远远地。

.class{

    position:absolutely;

    left:-999px;

    top:-999px;

}