1.opacity

opacity 属性的意思是设置一个元素的透明度，它不是为改变元素的边界框而设计的，opacity 设为 0 只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用，但是元素和它所有的内容会被读屏软件阅读，就是元素的行为就和它们不透明时一致。

2.visibility

将它的值设为 hidden 将隐藏我们的元素，如同 opacity 属性，被隐藏的元素依然会对我们的网页布局起作用，与 opacity 唯一不同的是它不会响应任何用户交互，此外，元素在读屏软件中也会被隐藏。

3.display

display 属性依照词义真正隐藏元素。将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦 display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过渡动画是无效的，它的任何不同状态值之间的切换总是会立即生效。

visibility:hidden 和 display:none 的另一个不同之处:

将任何子孙元素 visibility 显式设置成 visible 可以让它变得可见，但是 display 不吃这一套，不管自身的 display 值是什么，只要祖先元素的 display 是 none，它们就都不可见。

4.position

opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互，在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。

{position: absolute;

top: -9999px;

 left: -9999px;}

这种方法的主要原理是通过将元素的 top 和 left 设置成足够大的负数，使它在屏幕上不可见。采用这个技术的一个好处（或者潜在的缺点）是用它隐藏的元素的内容可以被读屏软件读取。