Javascript 单击一个按钮以显示一个模式按钮会使“显示”按钮出现；“在上面”；模态的

我有一个屏幕a和B。屏幕a包含我的angular app content div，其中包含一个按钮。屏幕B包含带有模式的背景。单击屏幕A中的按钮使屏幕B可见

我使用带有*ngIf的Angular来显示/隐藏屏幕B

问题是，当屏幕B出现（背景和模式）时，屏幕A中单击的按钮会出现在屏幕B的顶部（类似于更大的Z索引），直到单击其他按钮为止。我尝试过在没有运气的情况下将屏幕B的Z索引更改为一个高的数字。有人熟悉这种行为吗？我将添加屏幕截图来说明我的问题

屏幕B中的背景和模式是具有以下CSS的嵌套div：

.modalWrapper {
  z-index: 2;
  min-height: 100%;
  position: fixed;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
}
.modalContent {
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.24), 0 0 1px rgba(0,0,0,.12);
  position: fixed;
  width: 500px;
  min-height: 300px;
  max-height: 415px;
  overflow-y: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 25px;
  z-index: 3;
}

---

z指数和位置固定道具存在一些问题。为此，请了解HTML中的堆叠。元素是堆叠上下文。如果有两个屏幕A和B表示（A和B是子屏幕..而A不在B内），那么请将z索引设置得更高，以便B在A上看到它。更多详细信息请参见此处

z索引以及可能的固定属性。它们有一些问题。参考：按钮的z指数似乎高于modal@charankumar事实并非如此。当再次在模式内单击时，按钮将显示在模式的后面。在我的问题中，我还说我尝试为屏幕B设置一个高Z索引编号。通过一个简单的修复方法解决了这个问题-HTML堆叠顺序：在HTML模板中将屏幕B放置在屏幕a之后，并且它的行为正确。谢谢@AravindS@themanwithballs很高兴知道这有帮助。。我将添加它作为一个答案，以便其他人可以从中受益。