覆盖 div（添加的 css）不覆盖在 ion-content 内节奏的 Ionic 标题栏答案

【问题标题】：Overlay div (added css) not cover Ionic header bar which paced inside ion-content覆盖 div（添加的 css）不覆盖在 ion-content 内节奏的 Ionic 标题栏
【发布时间】：2020-05-20 09:03:34
【问题描述】：

我需要创建一个基于动态template、background 和actions 的自定义弹出窗口，以处理这个创建的div 覆盖。

div 放在 ion-content 内，这是强制性要求。

overlay div不能覆盖header，似乎header的z-index最高，也就是说它不能被子页面的任何东西覆盖。

在离子门户here 上发布了相同的问题，但没有解决方案。

请在下面找到我的应用程序中使用的源代码。

<!---HTML source -->

<ion-app>
  <ion-header>
   <ion-toolbar>
    <ion-title>Hello</ion-title>
   </ion-toolbar>
 </ion-header>
 <ion-content>
       <div class="overlay">Test</div>
 </ion-content>
</ion-app>


/** css source */

.overlay {
         position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

https://ionic-angular-v5-ryaoho.stackblitz.io

请帮助我使用 CSS 解决此问题。

【问题讨论】：

嗨桑托什，你能详细说明什么不适合你吗？我在这里复制了它：stackblitz.com/edit/ionic-angular-v5 它确实涵盖了整个应用程序？你有一个错字和一些逗号问题，但就是这样。也许我错过了什么 - 请更新你的 q
它适用于简单的 Angular 应用，但不适用于 ionic 内容
您能否在 stackblitz 上添加细节并重新创建问题？否则很难帮助你
当然让我添加代码 sn-p
ionic-angular-v5-ryaoho.stackblitz.io

标签： html css angular ionic-framework

【解决方案1】：

感谢分享演示。我在这里查看了它的来源：

https://stackblitz.com/edit/ionic-angular-v5-ryaoho

您的 CSS 中有一个逗号会阻止叠加层正确设置 z-index：

p {
  font-family: Lato;
}
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 99999, // here plz remove this comma

}

如果您删除逗号，您会看到覆盖正确地覆盖了页面的所有内容，包括标题。

【讨论】：

这个问题是因为标题 z-index 超过了覆盖