覆盖整个屏幕的div上的高亮元素，z-index对我不起作用

Question

我不知道如何使菜单图标位于覆盖整个屏幕的div上方。我正在尝试生成一个覆盖我所有应用程序的屏幕。 但我希望菜单圈突出，以便用户可以与之交互，而应用程序的其余部分具有一个div，该div的类名为 screen ，该类覆盖了我的屏幕的100％。

<div class="screen"></div>
.screen{
  position: fixed;
  background: black;
  height: 100vh;
  width:100%;
  top:0px;
  left:0px;
  opacity:0.9;
}

我该怎么做？ （这是我的愿望）我需要将图标放在div.screen上方

我只能得到这个：（当前问题）

我共享正在执行的源代码，如果要编辑内容，则必须修改 app / app.css 文件（css）和 pages / home / home。 html （.html），以便实时查看。

https://stackblitz.com/edit/multi-level-side-menu-waldmo?file=pages%2Fhome%2Fhome.html

Answer 1

离子头部分应像这样 <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button>

，看起来您想在.screen div中包含所有屏幕内容，所以我将其更改为

<ion-content padding>  
  <div class="screen">
    <h3>Home</h3>
  </div>
</ion-content>

<ion-content padding> <div class="screen"> <h3>Home</h3> </div> </ion-content>

并且我还将类的css更改为

screen

}

您可能想玩.screen { position: fixed; background: black; padding-top:80px; height: 100vh; width:100%; top:0px; left:0px; opacity:0.9; z-index: 0; color:white; 和padding-top

Answer 2

1. 如果您可以更改HTML标记，请将屏幕div置于离子按钮的底部，

2. 添加z索引：1；到“ .screen”类，

3. 删除“包含：内容；”和“溢出：隐藏；”到CSS上的“ .toolbar”类。

结果：https://prnt.sc/kl5m7y

希望这会有所帮助：）