title: create simple toast notifications and chain them in a row from top to bottom
body: <p>I am trying to create toast notifications, for the most part, my code is working fine enough. However, I am struggling to position my toasts on top of everything else in the page, so that toast #1 appears on top of everything in the top of the page, toast #2 appears on top of everything, but will be stacked under toast #1, etc.</p>
  
  <p>Here is my code:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#btnSuccess").click(function() {
      createSuccessToast("everything is fine");
    });
  
    $("#btnError").click(function() {
      createErrorToast("something went wrong");
    });
  });
  
  function createSuccessToast(toastMessage) {
    createToast(true, toastMessage);
  }
  
  function createErrorToast(toastMessage) {
    createToast(false, toastMessage);
  }
  
  function createToast(isSuccess, toastMessage) {
    var toastContainer = createToastContainer(isSuccess);
    createToastHeader(toastContainer, isSuccess);
    createToastContent(toastContainer, toastMessage);
    initToast(toastContainer);
    destroyToast(toastContainer);
  }
  
  function createToastContainer(isSuccess) {
    var toastContainer = $("&lt;div&gt;&lt;/div&gt;");
    toastContainer.addClass("toastContainer");
    if (isSuccess) {
      toastContainer.addClass("toastContainerSuccess");
    } else {
      toastContainer.addClass("toastContainerError");
    }
    return toastContainer;
  }
  
  function createToastHeader(toastContainer, isSuccess) {
    var toastHeader = $("&lt;div&gt;&lt;/div&gt;");
    toastHeader.addClass("toastHeader");
    toastHeader.html(isSuccess ? "Success" : "Error");
    toastContainer.append(toastHeader);
  }
  
  function createToastContent(toastContainer, toastMessage) {
    var toastContent = $("&lt;div&gt;&lt;/div&gt;");
    toastContent.addClass("toastContent");
    toastContent.html(toastMessage);
    toastContainer.append(toastContent);
  }
  
  function initToast(toastContainer) {
    toastContainer.hide(function() {
      $(document.body).append(toastContainer);
      toastContainer.fadeIn(500);
    });
  }
  
  function destroyToast(toastContainer) {
    setTimeout(function() {
      toastContainer.fadeOut(500, function() {
        toastContainer.remove();
      });
    }, 5000);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.toastContainer {
    margin-top: 10px;
    border-radius: 5px;
    font-weight: bold;
    padding: 10px;
    color: #ffffff;
  }
  
  .toastContainerSuccess {
    background-color: #99ff33;
  }
  
  .toastContainerError {
    background-color: #ff1a1a;
  }
  
  .toastHeader {}
  
  .toastContent {
    margin-top: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;button id="btnSuccess"&gt;
  Success
  &lt;/button&gt;
  
  &lt;button id="btnError"&gt;
  Error
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>To achieve my desired results, I added 2 CSS properties to <code>.toastContainer</code>:</p>
  
  <ol>
  <li><code>position: absolute;</code></li>
  <li><code>z-index: 1;</code></li>
  </ol>
  
  <p>But then, all toasts would spawn at the exact same location on the page, so if there were multiple toasts, only the most recent would be visible.</p>