Css 在覆盖整个屏幕的div上突出显示元素，z-index不适合我

我不知道如何使菜单图标位于覆盖整个屏幕的div上方。我正在尝试生成一个覆盖所有应用程序的屏幕。 但是我想让菜单圈脱颖而出，用户可以与它交互，而应用程序的其余部分有一个div，它包含一个名为screen的类，该类覆盖了我屏幕的100%

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

.屏幕{
位置：固定；
背景：黑色；
高度：100vh；
宽度：100%；
顶部：0px；
左：0px；
不透明度：0.9；
}

---

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

我只知道：（当前的问题）

我分享了我正在做的源代码，如果你想编辑一些东西，你必须修改app/app.css文件（css）和页面/home/home.html（.html），才能实时查看

---

离子头部分应如下所示

看起来你想把所有的屏幕内容都放在里面。screen div所以我把它改成了

}

您可能需要使用
填充顶部
和
颜色

如果可以更改HTML标记，请将screen div放在ion按钮的底部

增加z指数：1；到“.screen”类

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

结果:

希望这会有所帮助：）
我需要将图标放在div上方。screen@yavg图标已经在div.screen上方，否则当你点击它时它不会再出现，或者你对“上面”有其他含义吗？@yavg这就是你想要实现的吗？这是叉子：1。css:2。html:这是fork:1。css:2。html：
<ion-content padding>  
  <div class="screen">
    <h3>Home</h3>
  </div>
</ion-content>

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