移动浏览器platform = ios上的带有“ position：fixed”的叠加层放置在<ion-header>后面

Question

我正在尝试显示一个style={position:fixed,height:100%}覆盖整个屏幕的覆盖图。这是一个显示它按预期工作的堆栈闪电战：

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

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

这是一个具有相同组件的离子项目，可以在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;
    }
}