My application's alert message is supposed to stay on top of all other HTML elements as the page scrolls. However, it seems to be going behind certain components instead of staying on top like it should. This issue is puzzling because all components use the same bootstrap CSS, so there shouldn't be any difference. I've tried adjusting the z-index and container fixed properties as recommended in a post, but it hasn't resolved the issue. Additionally, lowering the z-index of other components didn't work either. I've compared the CSS of elements where the alert stays on top versus where it doesn't, but I haven't found any differences that would explain the issue.
Here is my Alert Message component:
<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">×</button>
</div>
The CSS of the alert message:
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 3px solid transparent;
border-radius: 0.25rem;
z-index: 999; ==> not working
}
Where should I focus my attention? What could be causing this issue?