弹出覆盖的标题位置问题

Question

我在 Angular 2 中工作。我的 html 页面有标题 div 和弹出覆盖 div。当我打开弹出式覆盖时，我们面临 z-index 问题，而不是仅申请标题 div。我想应用覆盖孔窗口时我打开弹出窗口。如果我改变我的标题位置是继承然后它会工作，但我不会改变我的标题位置，因为标题是固定位置。如何解决这个问题？

HTML：

header-component

 <div class="myheader"> 
 ..menus 
 </div>

弹出组件

<div class="popup"></div> 
<div class="overlay"></div>

CSS

 .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; 
    z-index: 106; 
    width:100%;
    height:100%;
    background:#fff;
    opacity:.60;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);filter:alpha(opacity=60);
    }   

    .myheader{ 
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    position: fixed;
    z-index: 100;
    margin: 0px;
    padding: 0px;
    background-color: #fff;
    border-bottom: 1px solid #ebebeb;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
    }

Answer 1

我已经取出了一些代码给你看，如果你只是改变 z-index，它就可以正常工作。哪个<div> 具有较高的z-index 将在顶部。

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box; 
}

.overlay, .myheader {
  position: fixed;
  top: 0;
  left: 0;
}

.overlay {
  z-index: 98; 
  color: white;
  background:black;
}   

.myheader { 
  z-index: 99;
  background-color: red;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box; 
}

.overlay, .myheader {
  position: fixed;
  top: 0;
  left: 0;
}

.overlay {
  z-index: 98; 
  color: white;
  background:black;
}   

.myheader { 
  z-index: 99;
  background-color: red;
}

<div class="overlay">Things</div>
<div class="myheader">Stuff</div>