覆蓋 div（添加的 css）不覆蓋離子 header 條，它在 ion-content 內部起搏

Question

我需要創建一個基於動態template 、 background和actions的自定義彈出窗口，以處理這個創建的div覆蓋。

該div放置在ion-content內，這是強制性要求。

覆蓋 div 不能覆蓋 header，似乎 header 具有最高的 z-index，這意味着它不能被子頁面中的任何內容覆蓋。

此處的離子門戶上發布了相同的問題，但解決方案不可用。

請在下面找到在我的應用程序中使用的源代碼。

<!---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 解決此問題。

Answer 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

}

如果刪除逗號，您會看到覆蓋正確地覆蓋了頁面的所有內容，包括 header。