单击按钮以显示模态使按钮出现在模态的“顶部”答案

【问题标题】：Clicking a button to show a modal makes button appear "on top" of modal单击按钮以显示模态使按钮出现在模态的“顶部”
【发布时间】：2018-06-26 09:05:21
【问题描述】：

我有一个屏幕 A 和 B。屏幕 A 包含我的 Angular 应用内容 div，其中包含一个按钮。屏幕 B 包含带有模态的背景。单击屏幕 A 中的按钮使屏幕 B 可见。

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

问题在于，当屏幕 B 出现（背景和模态）时，在屏幕 A 中单击的按钮会出现在屏幕 B 的顶部（类似 Z 索引），直到单击其他内容。我尝试将屏幕 B 的 Z-index 更改为一个较高的数字，但没有运气。任何熟悉这种行为的人？我将添加屏幕截图来说明我的问题。

屏幕 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-index 以及可能的固定道具有一些问题。参考：stackoverflow.com/questions/5218927/…
按钮的 z-index 似乎高于模态
@charankumar 不是。在模态框内再次单击时，该按钮将按应出现在模态框后面。我还在我的问题中说我尝试了屏幕 B 的高 Z-index 数。
通过简单的修复解决了这个问题 - HTML 堆叠顺序：在 HTML 模板中将屏幕 B 放在屏幕 A 之后，它的行为正确。谢谢@AravindS
@themanwithballs 很高兴知道它有帮助。我会将其添加为答案，以便其他人可以从中受益。

标签： javascript html css angular

【解决方案1】：

z-index 和位置固定道具有一些问题。因为知道 HTML 中的堆叠。元素是堆叠上下文。如果你有两个屏幕 A 和 B 意味着（A 和 B 是孩子..并且 A 不在 B 内），然后给 B 更高的 z-index 以查看它超过A.更多细节在这里z-index not working with fixed positioning

【讨论】：