display:none; visibility:hidden; opacity:0三者的区别

display:none;

  1. 该属性会让元素完全从DOM中消失，浏览器不渲染设置该属性的元素，不占据DOM树空间
  2. 无法进行事件监听，不可点击
  3. 动态修改该属性会造成重排，性能较差
  4. 继承性方面：非继承性！设置了该属性的元素的子元素即使设置display:block依然不会显示它的子元素
  5. transition不支持display的显示隐藏动画效果，但是display:none不会影响animation的动画效果！

visibility:hidden;

  1. 设置该属性的元素依然在DOM中，会被浏览器渲染，占据DOM树空间
  2. 但它无法被监听，因此不可点击
  3. 动态修改该属性会引成重绘，性能较display:none高
  4. 属于继承性属性！设置该元素的子元素如果修改visibility值是可以显示该子元素的！
  5. transition支持该属性

opacity:0;

  1. 占据空间，仅仅是设置透明度让该元素不可见
  2. 可以被监听，可以点击
  3. 动态修改不会造成重绘和重排，性能较高！
  4. 非继承性！设置该属性元素的子元素若设置opacity:1依然无法显示
  5. 可以配合transition显示淡入淡出效果

position:relative; z-index:-1;

  1. 元素占据空间
  2. 不可见
  3. 不可点击

position:absolute; z-index:-1;

  1. 元素不占据空间，因为absolute让该元素脱离文档流
  2. 不可见
  3. 不能点击

position:absolute; opacity:0;

  1. 元素不占据空间
  2. 不可见
  3. 可以点击