在移动safari `platform=ios`上用<ion-header>后面的` `position:fixed`覆盖

Question

我正在尝试显示一个覆盖整个屏幕的style={position:fixed,height:100%}覆盖图。下面的stackblitz展示了它的预期效果：

https://stackblitz.com/edit/angular-ionic4-test-posfixed

然而，当我在xcode/ios/mobile-safari上部署时，覆盖卡在<ion-header>后面。我似乎无法调整CSS z-index来使其正常工作。

下面是一个ionic项目，其中包含可在xcode中运行的相同组件

https://github.com/mixuala/posfixed.git

cd ./posfixed
npm install
ionic serve &
ionic cordova run ios -l

Answer 1

我花了一段时间才弄明白，但答案很简单。position:fixed创建不同的堆叠上下文。最终，有效的方法是在适当的时候将position:fixed添加到所有不正确的覆盖项中。

.show-overlay {
    ion-menu {  
      position:fixed;
    }
    ion-header {
      position:fixed;
    }
    .overlay {
      // now on top of ion-header when platform=ios
      position:fixed;
    }
}