css - 警报消息没有显示在我所有的 html 组件之上

Question

我在我的应用程序上显示一条警告消息，该消息跟随页面滚动并且应该位于所有其他 HTML 元素之上。它工作正常，除了当它滚动到它落后的 html 元素的某些部分时。当然，我希望它每次都能保持领先。我的页面上有一个接一个的不同组件，我发现它取决于它滚动的组件。真正让我困惑的是，所有组件都使用相同类型的 Bootstrap (显然应该是 CSS)，而且对我来说几乎是一样的。我不明白为什么它对某些人有效，而对其他人无效。

我尝试遵循“容器固定/警报 z-index”的想法，就像在这篇文章中一样 Css alerts not on top那没有用。我试图为其他组件定义一个较低的 z-index。那也没用。我更准确地查看了一个元素经过的 CSS 和另一个没有经过的元素的 CSS。我没有发现任何可以解释的东西。

这是我的警报消息组件:

<div *ngFor="let alert of alerts" class="{{ cssClass(alert) }} alert-dismissable"
 style="top: 0; right: 0;">
  {{alert.message}}
 <button type="button" class="close" (click)="removeAlert(alert)" style="margin-left: 5px">&times;</button>
</div>

警报消息的 CSS:

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 3px solid transparent;
    border-radius: 0.25rem;
    z-index: 999; ==> not working
 }

你认为我应该看哪里？这能解释什么？

Answer 1

感谢 JohnnyDevNull 的建议，我解决了这个问题。不出所料，警报组件的位置很重要，以便在其他组件上方正确显示。

所以我把我的

<app-message></app-message>

在我的组件路径(在我的例子中是在 app.component.html 中)上一个级别并且它工作得很好。