Сделать оповещения о начальной загрузке открытыми и наращиваемыми

Question

Я хочу получить уведомление о начальной загрузке, чтобы оно появилось поверх страницы и исчезло через несколько секунд.Я уже выполнил эту часть, но теперь, как я могу создать предупреждающее сообщение, и если приходит второе, которое они накладывают друг на друга, и если одно исчезает, все остальные перемещаются в правильное место.

Есть липростое решение для этого?

$(document).ready(function() {
  $("#successMessage").addClass('slide-down', 200).delay(2000).fadeOut(2000);
})

.slide-down {
  top: 55px !important;
}

.alertNotify {
  position: fixed;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style="background-color: gray; width: 100%; height: 50px;">.
</div>
<label id="successMessage" class="alert alert-success alertNotify" type="button">Test Message</label>

Код: jsFiddle

Answer 1

Если вы хотите сложить свои оповещения.Вы можете сделать это, используя z-index.чем больше z-index будет отображаться сверху.Пример.Вы можете создать другой класс

.alertMessage {
  position:fixed;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1 !important;
}

, который имеет больше z-index, чем ваше предыдущее предупреждение.После этого добавьте его в другое оповещение.

<label id="alertMessage" class="alert alertMessage" type="button">Another Message</label>