如何解决Ionic ion-tabs遮挡页面overlay遮罩div的问题

问题原因 #

Ionic 内置的 ion-tabs 组件默认设置了很高的层级优先级，z-index 通常在 1000 以上，你当前遮罩层设置的 z-index 仅为99，远低于tabs的默认层级，因此会被tabs覆盖显示。

解决步骤 #

1. 优先调高遮罩层z-index
   直接把你的.overlay类的z-index调整到9999即可覆盖tabs，修改后的代码如下：

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

2. 调整后仍不生效的处理方案
   如果调高z-index后问题仍然存在，说明你的遮罩元素被父容器限制了层叠上下文：当遮罩的父级容器设置了transform、opacity<1、filter、will-change等属性，或是父级本身的z-index低于ion-tabs时，子元素的z-index无论设置多高都无法超出父级的层叠范围。
   此时你需要将遮罩的<div class="overlay"></div>元素移动到项目的根节点下，和ion-tabs组件处于同一层级，不要放在tab对应的子页面内部，即可保证遮罩的层级全局生效。

内容的提问来源于stack exchange，提问作者solimanware