Question

我正在应用程序上显示警告消息，该消息跟随页面滚动，并且应该位于所有其他HTML元素的顶部。它工作正常，除了它在html元素的某些部分上滚动时会落后。我希望它每次都保持在最佳状态。我的页面上有一个接一个的不同组件，并且我确定它取决于它所滚动的组件。真正使我感到困惑的是，所有组件都使用相同类型的引导程序（显然应该是CSS），并且对我来说几乎一样。我不知道为什么它在某些产品上起作用，而不是在其他产品上起作用。

我试图遵循“容器固定/警报z索引”的想法，就像这篇帖子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中），并且效果很好。

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

1 个答案: