我正在尝试生成一个覆盖所有应用程序的屏幕。但我希望菜单圆圈突出,用户可以与它交互,而应用程序的其余部分有一个名为 screen 的div类,它覆盖了我的屏幕的100%。
<div class="screen"></div>
.screen{
position: fixed;
background: black;
height: 100vh;
width:100%;
top:0px;
left:0px;
opacity:0.9;
}
我该怎么做呢?
我只得到了这个:
我分享了我正在做的源代码,如果你想编辑一些东西,你必须修改应用程序/app.css文件(Css)和pages/home/home.ts (.js),才能实时看到。
https://stackblitz.com/edit/multi-level-side-menu-waldmo?file=pages%2Fhome%2Fhome.html
发布于 2018-08-20 06:12:09
使用z-index将其设置为最高9999级
z-index: 9999;
也要定位它
position: relative;
z-index覆盖页面的div为99,z-index按钮为100
发布于 2018-08-20 07:01:44
如果你想让一些东西突出在前面,就像在屏幕前面一样,那么是的,你应该使用这个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>
请注意,这只是我将如何做,您可能必须修改它,以适合您。
https://stackoverflow.com/questions/51922211
复制相似问题