Как показать оповещения bootstrap сверху

Question

Я использую оповещения bootstrap, чтобы показать успешные сообщения и сообщения об ошибках. Я хотел наложить эти предупреждения на верхнюю часть div. Есть несколько сообщений SO (here), которые я читаю, что предлагает использовать postion:fixed Однако это не работает для меня. В моем сценарии должно произойти 2 вещи.

1> Все предупреждения должны быть в верхней части другого div. (я думаю, что в моем случае предупреждения скрываются под силой фона настройки цвета им в mt-form-panel классе. Однако нам нужен некоторый цвет фона для содержимого дел)

2>alert-success потребность быть на вершине alert-danger

у меня есть JSFiddle here

Answer 1

Вы можете использовать z-index принести предупреждения на фронт.

Что-то вроде этого:

.mt-alerts { 
    position:fixed; 
    z-index: 999; 
} 

Answer 2

Используйте z-index:1000, чтобы получить .mt-alerts показать на вершине .mt-form-panel.

Для пункта 2 вы можете сделать две вещи.

A) Похоже, что только одно предупреждение будет появляться одновременно, и оба не могут появиться вместе. В этом случае вы можете установить display:none; по обоим предупреждениям по умолчанию и установить их обратно на display:block, когда соответствующее условие кода встречается.

B) Вы можете использовать position:absolute вместе с полями и определенной шириной для размещения предупреждений в одном и том же месте.