找到一个覆盖整个屏幕的div，如何使元素脱颖而出？

Question

我正在尝试生成一个涵盖我所有应用程序的屏幕。但我希望菜单圈突出，以便用户可以与之交互，而应用程序的其余部分具有一个div，该div的类名为 screen ，该类覆盖了我的屏幕的100％。

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

我该怎么做？

我只得到这个：

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

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

Answer 1

使用z-index使其达到9999级最高水平

z-index: 9999;

还要定位

position: relative;

用99索引覆盖页面的div，用100索引按钮。

Answer 2

如果要使某些东西突出在屏幕的前面，那么可以，请使用以下CSS：

HTML：

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

CSS：

<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>

请注意，这就是我要做的，您可能需要对其进行修改以适合您。