Предупреждающие сообщения не отображаются поверх всех моих HTML-компонентов - PullRequest
Новая
       4

Предупреждающие сообщения не отображаются поверх всех моих HTML-компонентов

0 голосов
/ 06 февраля 2019

Я показываю предупреждающее сообщение в моем приложении, которое следует за прокруткой страницы и должно быть поверх всех других элементов HTML.Он работает нормально, за исключением того, что когда он прокручивает некоторую часть html-элементов, он отстает.Я хочу, чтобы это всегда оставалось на вершине каждый раз.На моей странице есть разные компоненты один за другим, и я обнаружил, что это зависит от компонента, который он прокручивает.Что меня действительно озадачивает, так это то, что все компоненты используют один и тот же тип начальной загрузки (так что, очевидно, это будет CSS), и для меня они почти одинаковы.Я не знаю, почему он работает с некоторыми, а не с другими.

Я пытался следовать идее «контейнера с фиксированным значением / оповещения по z-index», как в этом посте Предупреждения Css не указаны сверху Это не сработало.Я попытался определить более низкий z-индекс для других компонентов.Это тоже не сработало.Точнее я смотрю на CSS одного элемента, где он проходит, и другого, где его нет.Я не опознал ничего, что могло бы объяснить.

Вот мой компонент Alert Message: 

<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
 }

Где сделатьты думаешь мне стоит посмотреть?Чем это можно объяснить?

1 Ответ

0 голосов
/ 07 февраля 2019

Благодаря JohnnyDevNull советам я решил проблему.Неудивительно, что место вашего компонента оповещения имеет значение для правильного отображения над другими компонентами.

Итак, я поднял 

<app-message></app-message>

на уровень выше в пути к моим компонентам (в моем случае в app.component.html), и он работал отлично.

...