《精彩绝伦的CSS》——提示（三）让元素“消失”

三、让元素消失

1、抑制元素的显示：display:none;

.hide{

display:none;

}

应用了hide类的元素，就像不存在一样，不会对布局有任何影响。

然而这样子做会有两个陷阱，一个潜在的，一个固有的。

潜在的就是，如果通过js将display设为none那么想复原时该怎么做，因为原显示值可能是inline或者block又或者都不是，有个普遍的做法，即不指定任何值：

obj.style.display = '';

这会使默认恢复为在其css中设置的值，或者浏览器内置样式值。

另一个解决方法是，添加一个隐藏元素的类，当需要显示元素时将该类去掉。

固有问题就是，显示值为none时，元素无法被绝大多数的辅助技术（比如屏幕阅读器）“看到”。

2、抑制元素可见性：visibility:hidden;

该规则与display的区别是参与页面布局。但这对于绝对元素来说没有什么问题，因为它们已经不参与页面布局了。（绝对定位元素位于其他元素的上方，并且在对其他元素进行布局时不被考虑在内。）

但遗憾的是这种技术仍不能被绝大多数屏幕阅读器可见。

3、将元素移出屏幕

.hide{position:absolute;top:-10000em;left:-10000em;}

绝对定位移出屏幕。这样不仅会将元素移到视野之外，但是至少仍被某些屏幕阅读器识别。这就是这种技术会被当做隐藏元素的更佳选择的原因。

那么要将移出的元素移回来主要有三种方法：

(1).show{top:0;left:0}

(2).show{position:static;}

采用这种方式，就不需重设top和left的值了，因为在静态定位中这些属性将完全被忽略掉。无论你是否重设它们，都不会有任何差异。

(3).show{position:relative;top:0;left:0;}