Как поправить уведомления?

Question

[kentos]

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

const letStartAlert = document.createElement("div");
letStartAlert.className = "notif";
document.body.appendChild(letStartAlert);

function showNotification(options) {
  var notification = document.createElement("div");

  notification.className = "notification";
  if (options.cssText) {
    notification.style.cssText = options.cssText;
  }
  notification.style.top = options.top || 0;
  notification.style.right = options.right || 0;
  notification.style.bottom = (options.bottom || 0) + "px";
  notification.style.left = (options.left || 0) + "px";
  if (options.className) {
    notification.classList.add(options.className);
  }

  notification.innerHTML =
    '<p class="text_inner">' +
    '<span class="bg_notif">' +
    options.counter +
    "пользователя " +
    "</span>" +
    options.text +
    "</p>" +
    "проверено Proofly";
    document.querySelector('.notif').appendChild(notification);

  setTimeout(function() {
    document.querySelector('.notif').removeChild(notification);
  }, 4000);
}

setInterval(function() {
  showNotification({
    top: "auto",
    right: "auto",
    left: "24",
    bottom: "24",
    counter: "2 ",
    text: " просматривают эту страницу",
    className: "innerNotification",
    cssText: "1323"
  });
}, 6000);

Comments

[lGHOSTl]

Не позиционируйте абсолютно само уведомление, а позиционируйте какой-то блок(wrapper). А в него уже помещайте уведомления, как простые блоки.