Question

我在angular 2中工作。我的html页面具有标头div和弹出式覆盖div。当我打开弹出式覆盖图时，我们仅面临标头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>

弹出式窗口标题位置的问题

1 个答案: