Css 找到一个覆盖整个屏幕的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；
}

我怎么做

我只知道：

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

---

使用z-index使其进入顶部至9999级别

z-index: 9999;

还要定位它

position: relative;

---

用99对覆盖页面的div进行z-index，用100对按钮进行z-index。如果你想让某个东西在前面突出，比如在屏幕前面，那么是的，你应该使用以下CSS：

HTML:

CSS:

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

请注意，这正是我要做的，您可能需要修改它以适合您

<div class="screen">        
  <div class="menu">
    <!--Stuff here-->
  </div> 
</div>

<style>        
  .screen {
    position: fixed;
    background: black;
    height: 100vh;
    width:100%;
    top:0px;
    left:0px;
    opacity:0.9;
    z-index: 0;
  }
  .menu {
    z-index: 9999;
  }
</style>